私は記事の真ん中のように、文書の真ん中にある、どのウェブサイトにも入れられていますが、<head>
の中には入れられていません。このスクリプトは、<script>
タグを追加することで、ドメイン上に外部スクリプトを読み込みます(google analytics snippetのように)。本体ツリー内でスクリプトが実行されているときにDOMが準備されていますか?
私の質問は、DOMReadyイベントを待たずにスクリプトが評価されたときにDOMを操作することができると思いますが、DOMがまだ解析されていないかどうかです。
私のスクリプトが実行を開始し、DOMReadyイベントが発生すると大きな遅延が発生するため、尋ねています(茶色のバーを参照)。私はこのDOMReady implementation
ホストのウェブサイトを使用してい
<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!";
})();
いくつかの注意事項:
- 私はホストページを制御することはできません、それは内部で何かを持つことができます。
- 古いブラウザのサポートが懸念されています。
- 私は可能な限り早く物を追加することができるはずです。私は他のライブラリや画像の読み込みが完了するのを待つことができません。
- 毎回信頼できる作業です。
最初のスクリプト要素の前のすべての要素が既に存在します。 – CBroe
私が見ることができる唯一の可能性のある問題は、ビデオや大きな画像のような重いメディアアセットが読み込まれる前にスクリプトが読み込まれる場合です。しかし、あなたがメディアデータを守っていないなら、これは懸念すべきではありません。そして、既知のセレクタをターゲットにしている場合でも、それらの要素に 'onload'リスナを添付することができます。 – Tyblitz