2017-10-12 9 views
2

は私のページでは、私は動的にこのような機能を持つスクリプトを追加:私はこれを実行する前にロードされる文書のを待つ必要がある場合けれども、私は思ったんだけどdocument.appendChild()を呼び出すタイミングは?

function addScript(src) { 
    var s = document.createElement('script'); 
    s.setAttribute('src', src); 
    document.body.appendChild(s); 
} 

。文書の本文がまだ準備できていない可能性はありますか?それはしかし不要である

document.onreadystatechange = function() { 
     if (typeof document.body !== 'undefined') { 
      addScript('http://my.url); 
     } 
    }; 

わからない場合は、多分ページ内のスクリプトのロードを遅らせる:

私は、現時点ではこれを使用しています。

+0

は、なぜあなたは 'document.body.onload =機能(){addScript(SRC)}'を使用していませんか? – guest271314

答えて

1

bodyはまだ利用できませんが、headは追加する必要があります。あなたがロードするために文書を待ちたくない場合は

document.head.appendChild(s); 

そうでない場合は、DOMContentLoadedイベントを使用します。

document.addEventListener("DOMContentLoaded", function() { 
    // inject the script 
}); 
0

httpread要求に関連してonreadystatechangeが使用されます。 (またはIEの古いバージョンでのみ使用されます)

あなたがそれを行うことができる最高の方法は、bodyタグの終了のすぐ下にメソッドを呼び出します。この時点で、ドキュメントが実際にロードされたことを確認できます。

ただし、コールバックをいつでもドキュメントのonloadイベントに添付することができます。

0

document.onreadystatechangeの代わりに、document.onloadを使用します。これは、ドキュメントのすべての要素の読み込みが完了した後に発生します。 onreadystatechangeは、1回のセッション(これまで私が利用していたセッション)で、特にajaxのロード後に複数回起動することができます。 onloadは、ページの読み込みが完了した後にのみ再起動します。

readystatechangeイベントは、ドキュメントのreadyState属性が変更されたときに発生します。


文書読み込み処理の終了時に負荷イベントが発生。この時点で、ドキュメント内のすべてのオブジェクトがDOM内にあり、すべてのイメージ、スクリプト、リンク、およびサブフレームの読み込みが完了しています。

出典:
readystatechange
onload

関連する問題