追加脚本头使用JavaScript - 怪异的行为

我试图解决的问题是广告加载脚本，与JSONP加载广告代码，并将其插入到DOM。追加脚本头使用JavaScript - 怪异的行为

现在有时广告代码将提供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>

来源

2011-07-22 f.anderzon

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

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

可避免这种行为打断你的循环有两种方式：

环落后，从.length - 1到0包容性，或
打开NodeList到一个数组，这样的元素AREN不会从你的下面移出来。

来源

2011-07-22 11:01:47

谢谢！你是对的，但插入到DOM中的JavaScript在插入到div中或者它被移动到头时不会运行。 –

@user：如果您在DOM中插入实际的'script'元素，则其包含的脚本会立即运行。如果你没有看到这种行为，我会建议一个单独的问题（因为这个问题更多地是为了提前结束循环），显示你在做什么，并问你为什么没有得到你期望的结果。最佳， –

谢谢，我现在正在为一个新问题设置示例。 –

追加脚本头使用JavaScript - 怪异的行为

回答

相关问题