javascript執行順序（內聯和外部），IE與Firefox

Question

我在下一頁的javascript執行順序中遇到一些問題：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<script type="text/javascript">
    var blah = 0;

    function scriptDoneRunning()
    {
        alert(blah);
    }

    function addExternalScript(src, parentNode)
    {
        var sc = document.createElement('script');
        sc.setAttribute('type', 'text/javascript');
        sc.setAttribute('src', src);
        parentNode.appendChild(sc);
    }

    function addEndingScript(parentNode)
    {
        var theDiv = document.createElement('div');
        var sc = document.createElement('script');
        sc.setAttribute('type', 'text/javascript');
        sc.text = "scriptDoneRunning();";
        theDiv.appendChild(sc);
        parentNode.appendChild(theDiv);
    }
</script>
</head>

<body>
<div id="theparent">
    &nbsp;
</div>

<script type="text/javascript">
    addExternalScript("blah.js", document.getElementById("theparent"));
    addEndingScript(document.getElementById("theparent"));
</script>
</body>
</html>

blah.js文件如下所示。

blah=3;

本質上，代碼調用“ addExternalScript（）”，它將“ blah.js”的腳本元素添加到“ theparent”元素。 “ blah.js”將變量blah設置為3。

然后我們調用“ addEndingScript（）”，它將腳本塊附加到“ theparent”。 腳本塊所做的只是調用scriptDoneRunning（），它會警告變量等等。

這個想法是在blah.js完成執行之后，才調用scriptDoneRunning（）。 因為它將附加到外部腳本元素之后的“ theparent”后面，所以我希望它等待完成，然后它將調用scriptDoneRunning（）。 這是我所期望的行為，但是在Firefox中只能這樣工作。 在IE中，alert的值為0，這意味着blah.js中的代碼尚未執行。

這是頁面實際操作的精簡版，因此顯然沒有任何意義。 但是，有沒有一種方法可以使blah.js中的代碼始終在兩個瀏覽器中首先執行，從而添加內聯腳本？

此外，部署此功能后，我將無法控制外部js。 所以記住這一點 ;）

謝謝！

Answer 1

該腳本是異步加載的，您可以使用load （和IE的readystatechange ）事件確切地了解何時加載了外部腳本，但是您應注意刪除script元素，並在加載完成后使處理程序無效，以避免已知內存泄漏。

我還建議您將script元素插入頭部，沒有真正的理由（除非您使用document.write ，但我認為這不是一個好主意），可以將腳本元素添加到body任何位置.. 。

我使用以下與庫無關的函數，這些函數受jQuery的$ .getScript方法的啟發：

loadScript("blah.js", function () {
  addEndingScript(document.getElementById("theparent"));
  // or why not simply scriptDoneRunning(); ???
});

function loadScript(url, callback) {
  var head = document.getElementsByTagName("head")[0],
      script = document.createElement("script"),
      done = false;

  script.src = url;

  // Attach event handlers for all browsers
  script.onload = script.onreadystatechange = function(){
    if ( !done && (!this.readyState ||
      this.readyState == "loaded" || this.readyState == "complete") ) {
      done = true;
      callback(); // execute callback function

      // Prevent memory leaks in IE
      script.onload = script.onreadystatechange = null;
      head.removeChild( script );
    }
  };
  head.appendChild(script);
}

Answer 2

出現這種現象的原因是，當您動態附加腳本標簽時，IE將異步加載腳本（請檢查鏈接MSDN ）。 要等到腳本加載完成，您應該使用“ onload”（onreadystatechange）事件。

sc.onload = sc.onreadystatechange = function(){};

您可以使用加載器，我張貼作為一個解決問題或自己編寫。

PS：如果要支持IE6 <瀏覽器，最好使用setAttribute作為src屬性，最好使用直接屬性，例如

sc.src = "http://bla.js";

javascript執行順序（內聯和外部），IE與Firefox

問題描述

2 個解決方案

解決方案1
4 已采納 2009-12-08 21:31:01

解決方案2
3 2009-12-08 21:37:47

javascript執行順序（內聯和外部），IE與Firefox

問題描述

2 個解決方案

解決方案1 4 已采納 2009-12-08 21:31:01

解決方案2 3 2009-12-08 21:37:47

解決方案1
4 已采納 2009-12-08 21:31:01

解決方案2
3 2009-12-08 21:37:47