0

我要解决的问题是一个广告加载脚本，它使用 jsonp 加载广告代码并将其插入到 dom 中。

现在，有时广告代码将包含 javascript 标签，我认为只需将它们移至头部，它们就会运行。理论上效果很好，但是当我制作一个脚本来将脚本标签移动到头部时，我遇到了一些奇怪的行为。

所以我写了这段代码来测试脚本的移动部分，消除了其余代码作为错误源。

我得到相同的结果，如果我在 div 中只有两个脚本，它会移动其中一个，如果我有 3 个脚本，它会移动其中 2 个。在下面粘贴的代码中，它移动了脚本 1 和 3，跳过了远程 javascript 引用和最后一个脚本标签。

至少知道为什么会发生这种情况以及是否可以解决会很有趣。

编辑：为了澄清一件事，如果我首先放置远程 jquery 脚本，然后放置一个简单的脚本标签，它会将远程脚本标签移动到头部并跳过第二个脚本标签。

<!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您在一个错误的假设下工作：元素是否在heador中都无关紧要body，无论如何它们都会运行。在它们被附加到 DOM 之后移动它们充其量是没有意义的，如果在移动时重新运行脚本，最坏的情况可能会导致不幸的副作用（但我不认为是这样）。

至于为什么你会看到你看到的行为，那是因为getElementsByTagName返回了一个live NodeList。当您移动脚本时，它会从NodeList. 所以给定你的四个脚本，你会得到一个NodeList最初包含四个元素的，你的第一个脚本也是.length如此。当您将该脚本移出 时，将更新，因为该脚本不再位于 中，因此它的长度现在是指您的第二个脚本（加载 jQuery 的那个）。4[0]divNodeListdiv3[0]

您可以通过两种方式避免这种行为中断您的循环：

  1. 向后循环，从.length - 1到0包含，或

  2. 把NodeList变成一个数组，这样元素就不会从你下面移出。

于 2011-07-22T11:01:47.000 回答