Question

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

现在有时候广告代码会包含javascript代码，我认为这只是将它们移到head部分并且它们会运行的问题。从理论上来说，它工作正常，但当我制作一个脚本将脚本标签移动到头部时，我遇到了一些奇怪的行为。

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

我得到了相同的结果，如果我在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>

Answer 1

你在错误的假设下工作：无论script或head中是否有body个元素，它们都无关紧要。在将它们附加到DOM之后移动它们是没有意义的，如果脚本在移动时重新运行（但我认为不是这样），最坏的情况可能会导致不幸的副作用。

至于为什么你会看到你所看到的行为，这是因为getElementsByTagName会返回直播 NodeList。移动脚本时，它将从NodeList中删除。因此，考虑到您的四个脚本，您最初将返回包含四个元素的NodeList，因此.length为4而[0]是您的第一个脚本。当您将该脚本移出div时，NodeList已更新，因为该脚本不再位于div中，因此其长度现为3和{{1}引用你的第二个脚本（加载jQuery的那个）。

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

向后循环，从[0]到.length - 1包含，或
将0变为数组，因此元素不会从您下方移出。

使用javascript附加脚本 - 奇怪的行为

1 个答案:

使用javascript附加脚​​本 - 奇怪的行为

1 个答案:

使用javascript附加脚本 - 奇怪的行为