使用 javascript 將腳本附加到頭部 - 奇怪的行為

Question

我要解決的問題是一個廣告加載腳本，它使用 jsonp 加載廣告代碼並將其插入到 dom 中。

現在有時廣告代碼將包含 javascript 標簽，我認為只需將它們移動到頭部，它們就會運行。 理論上效果很好，但是當我制作一個腳本來將腳本標簽移動到頭部時，我遇到了一些奇怪的行為。

所以我寫了這段代碼只是為了測試腳本的移動部分，排除了代碼中的rest作為錯誤源。

我得到相同的結果，如果我在 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並且[0]指的是您的第二個腳本（加載 jQuery 的那個）。

您可以通過兩種方式避免這種行為中斷您的循環：

向后循環，從.length - 1到0 （含），或
將NodeList變成一個數組，這樣元素就不會從您的下方移出。

使用 javascript 將腳本附加到頭部 - 奇怪的行為

問題描述

1 個解決方案

解決方案1
1 2011-07-22 11:01:47

使用 javascript 將腳本附加到頭部 - 奇怪的行為

問題描述

1 個解決方案

解決方案1 1 2011-07-22 11:01:47

解決方案1
1 2011-07-22 11:01:47