Index > はじめての prototype.js ... 初期化スクリプトをどこに書けばよいのか?(Google AJAX Librariesを使う場合)
Fri, January 2, 2009

はじめての prototype.js ... 初期化スクリプトをどこに書けばよいのか?(Google AJAX Librariesを使う場合)

初期化スクリプトをどこに書けばよいのか?

initialize

通常ページが読み込まれて最初に動かすスクリプトを書く場所は、 手元にある prototype.js の解説書では、以下のようになっています。

<script>
document.observe("dom:loaded",function(){
    // ここに初期化スクリプトを書く.
});
</script>

つまり document がロード完了したらコールバックされる無名関数を登録して そこに初期化スクリプトを書きます。
そうすれば、ページ上に存在しているはずの要素にアクセスできない(まだロードされていないから) などのトラブルを回避できます。

ちょっと回りくどいが以下のように書いても同じかと思います。 function init(){ // ここに初期化スクリプトを書く. } document.observe("dom:loaded",init);

Google AJAX Libraries を使っている場合は...

以下のコードではうまく動きません。

<script src="http://www.google.com/jsapi"></script>
<script>
document.observe("dom:loaded",function(){
    // ここに初期化スクリプトを書く.
});
</script>

google.setOnLoadCallback() されるまでは、 prototype.js は使えないため、 いきなり書いてしまうと、エラーになります。

では、setOnLoadCallback()に定義した関数内ならよいのか?

<script src="http://www.google.com/jsapi"></script>
<script>
google.setOnLoadCallback(function() {
    document.observe("dom:loaded",function(){
        // ここに初期化スクリプトを書く.
        alert('hello');
    });
 });
</script>

これも、 うまくいきません。 →alert は実行されない。

おそらく、呼ばれない原因は、 setOnLoadCallback() に登録した関数がコールバックされるときには、 documentはロード完了済みだから? ではないでしょうか。(あくまで推測ですが)

とすれば...結局、結論としては、 以下のように setOnLoadCallback()関数に直接初期化スクリプトを書けばよいようです。
つまり、setOnLocdCallback()に登録した関数が呼ばれたときは、 既に、document はロード済みである、という認識なんです。

<script src="http://www.google.com/jsapi"></script>
<script>
google.setOnLoadCallback(function() {
    // ここに初期化スクリプトを書く.
    alert('hello');
 });
</script>

これが本当に意図通り、document ロード完了後に呼ばれるのかは まだ詳細調べていませんが、とりあえず手元のFirefox3では、そのように作動しているっぽい。

 Twitter
follow me on Twitter
 Categories