2016-11-29 8 views
1

私は記事の真ん中のように、文書の真ん中にある、どのウェブサイトにも入れられていますが、<head>の中には入れられていません。このスクリプトは、<script>タグを追加することで、ドメイン上に外部スクリプトを読み込みます(google analytics snippetのように)。本体ツリー内でスクリプトが実行されているときにDOMが準備されていますか?

私の質問は、DOMReadyイベントを待たずにスクリプトが評価されたときにDOMを操作することができると思いますが、DOMがまだ解析されていないかどうかです。

私のスクリプトが実行を開始し、DOMReadyイベントが発生すると大きな遅延が発生するため、尋ねています(茶色のバーを参照)。私はこのDOMReady implementation enter image description here

ホストのウェブサイトを使用してい

<html> 
 

 
<head> 
 
    ... 
 
</head> 
 

 
<body> 
 
    Website content 
 
    ... 
 
    <div> 
 
    
 
    <!-- Snippet --> 
 
    <div id="myContainer"></div> <!------(I should be able to query this div) --> 
 
    <script type="text/javascript"> 
 
    function() { 
 
     var ga = document.createElement('script'); 
 
     ga.type = 'text/javascript'; 
 
     ga.async = true; 
 
     ga.src = 'http://example.com/script.js'; 
 
     var s = document.getElementsByTagName('script')[0]; 
 
     s.parentNode.insertBefore(ga, s); 
 
    })(); 
 
    </script> 
 
    <!-- Snippet End --> 
 
    
 
    <div> 
 
    More content 
 
    ... 
 
</body> 
 
</html>

example.com/script.js

(function(){ 
    //by this time div#myContainer should exist, right? 
    var div = document.getElementById('myContainer'); 
    div.innerHTML = "Hello World!"; 
})(); 

いくつかの注意事項:

  • 私はホストページを制御することはできません、それは内部で何かを持つことができます。
  • 古いブラウザのサポートが懸念されています。
  • 私は可能な限り早く物を追加することができるはずです。私は他のライブラリや画像の読み込みが完了するのを待つことができません。
  • 毎回信頼できる作業です。
+1

最初のスクリプト要素の前のすべての要素が既に存在します。 – CBroe

+0

私が見ることができる唯一の可能性のある問題は、ビデオや大きな画像のような重いメディアアセットが読み込まれる前にスクリプトが読み込まれる場合です。しかし、あなたがメディアデータを守っていないなら、これは懸念すべきではありません。そして、既知のセレクタをターゲットにしている場合でも、それらの要素に 'onload'リスナを添付することができます。 – Tyblitz

答えて

0

はい、そうです。本文の一番下にスクリプトタグがある場合、スクリプトが実行されるまでにすべてがその前にレンダリングされます。

W3Schoolsにはこのテーマに関する素晴らしい記事があります。 <head>

スクリプトで

スクリプトは、それらが呼び出されたときに実行される、またはイベントがトリガされたときに、機能に配置されます。 あなたの機能をヘッドセクションに入れてください。こうすることで、それらはすべて1か所にあり、ページの内容を妨げません。あなたのスクリプトが関数内に配置する、またはスクリプトがページのコンテンツを記述する必要がある場合、それは体内に配置する必要がありますしたくない場合は<body>

スクリプトセクション。

関連する問題