0

私が解決しようとしている問題は、jsonp を使用して広告コードを読み込み、DOM に挿入する広告読み込みスクリプトです。

現在、広告コードに JavaScript タグが含まれていることがありますが、それらを head セクションに移動するだけで実行されると考えました。理論的には問題なく動作しますが、スクリプト タグを先頭に移動するスクリプトを作成すると、奇妙な動作に遭遇しました。

そこで、このコードを書いて、スクリプトの可動部分だけをテストし、残りのコードをエラー ソースとして排除しました。

同じ結果が得られます。div にスクリプトが 2 つしかない場合はそのうちの 1 つを移動し、スクリプトが 3 つある場合はそのうちの 2 つを移動します。以下に貼り付けたコードでは、スクリプト 1 と 3 を移動し、リモート JavaScript 参照と最後のスクリプト タグをスキップします。

少なくともなぜこれが起こるのか、そしてそれが解決できるかどうかを知ることは興味深いでしょう.

編集: 1 つ明確にするために、リモート jquery スクリプトを最初に配置し、単純なスクリプト タグの 1 つを 2 番目に配置すると、リモート スクリプト タグが先頭に移動し、2 番目のスクリプト タグがスキップされます。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// get div id
function test() {
var td = document.getElementById('testId');
var scripts = td.getElementsByTagName("script");
console.log("No. of scripts to transfer to head: "+scripts.length);
for(i=0;i<scripts.length;i++) {
    var curScript = scripts[i];
    document.head.appendChild(curScript);
}   
}
</script>
</head>
<body onload="test();">
<div id="testId">
    <script type="text/javascript">var firstScript = 1;</script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">var secondScript = 1;</script>
    <script type="text/javascript">var thirdScript = 1;</script>
</div>
</body>
</html>
4

1 に答える 1

1

あなたは誤った仮定の下で働いています:script要素がheadまたはにあるかどうかはまったく問題ではなくbody、それらは関係なく実行されます。DOM に追加された後にそれらを移動することはせいぜい無意味であり、最悪の場合、移動時にスクリプトが再実行されると、不幸な副作用が発生する可能性があります (しかし、そうではないと思います)。

あなたが見ている振る舞いを見ている理由については、 livegetElementsByTagNameを返すためです。スクリプトを移動すると、. したがって、4 つのスクリプトが与えられると、最初に 4 つの要素を含む最初のスクリプトが返されます。そのスクリプトを の外に移動すると、スクリプトが になくなったため が更新され、その長さがになり、2 番目のスクリプト (jQuery をロードするスクリプト)を参照します。 NodeListNodeListNodeList.length4[0]divNodeListdiv3[0]

この動作がループを中断するのを回避するには、次の 2 つの方法があります。

  1. 後方ループ、.length - 1包括0的ループ、または

  2. を配列にNodeList変換して、要素が下から移動しないようにします。

于 2011-07-22T11:01:47.000 に答える