首頁 > 文章 > web前端 > javascript同步與非同步動態建立script元素實例詳解

javascript同步與非同步動態建立script元素實例詳解

伊谢尔伦原創: 2017-07-21 15:21:042594瀏覽

動態建立script元素（非同步）

在同一個資料夾下方建立一個function3.html，程式碼如下：

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.src="package.js";
      document.body.appendChild(myScript);
      //如果马上使用会找不到，因为还没有加载进来
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
  <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

此辦法的優點相對於第二種而言就是不需要最開始就在介面寫一個script標籤，缺點還是非同步加載，有同樣的問題。

這三種方法都是非同步執行的，所以在載入這些腳本的同時，主頁面的腳本繼續運行，如果用以上的方法，那麼下面的程式碼將不會得到預期的效果。

不過可以在functionOne前面加一個alert就可以堵塞一下主頁面腳本的運行，然後你發現functionOne就可以運行了，或者你的後期代碼需要在另一個按鈕下執行，一步一步的來，要不就定義一個計時器，在固定時間後再執行後面的程式碼，不過在專案裡面肯定不可能使用這些方法。

其實第三種方法改一點就變成同步載入了。

動態建立script元素（同步）

在同一個資料夾下方建立一個function4.html，程式碼如下：

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }"));
      document.body.appendChild(myScript);
      //此处发现可以运行
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

此方法並沒有載入外部的js文件，而是為myScript添加了子項。在Firefox、Safari、Chrome、Opera和IE9中，這些程式碼可以正常運作。但是在IE8以及以下的版本會導致錯誤。 IE將3f1c4e4b6b16bbbd69b2ee476dc4f83a視為一個特殊的元素，不允許DOM存取其子節點。不過可以用3f1c4e4b6b16bbbd69b2ee476dc4f83a元素的text屬性來制定js程式碼，想下面的例子這樣：

var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.text = "function functionOne(){alert(\"成功运行\"); }";
document.body.appendChild(myScript);
//此处可以运行
functionOne();

經過這樣修改之後的程式碼可以在IE、Firefox、Opera和Safari3及之後版本中運行。 Safari3.0之前的版本雖然無法正確支援text屬性，但卻允許使用文字節點技術來指定程式碼。如果需要相容早期版本的Safari，可以使用下面程式碼：

var myScript= document.createElement("script");
myScript.type = "text/javascript";
var code = "function functionOne(){alert(\"成功运行\"); }";
try{
    myScript.appendChild(document.createTextNode(code));
}
catch (ex){
    myScript.text = code;
}
document.body.appendChild(myScript);
//此处发现可以运行
functionOne();

這裡，先嘗試標準的DOM文字節點方法，因為除了IE8以及以下，所有瀏覽器都支援這種方式。如果這行程式碼拋出了錯誤，那麼表示是IE8以及以下，所以就必須使用text屬性了。整個過程可以用以下函數來表示：

function loadScriptString(code)
{
  var myScript= document.createElement("script");
  myScript.type = "text/javascript";
  try{
    myScript.appendChild(document.createTextNode(code));
  }
  catch (ex){
    myScript.text = code;
  }
  document.body.appendChild(myScript);
}

然後你可以在其他地方使用此方法來載入需要使用的程式碼。實際上，這樣執行程式碼與在全域作用於中把相同字串傳遞給eval()是一樣的。

以上是javascript同步與非同步動態建立script元素實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何對javascript檔案載入進行最佳化程式碼詳解下一篇：如何對javascript檔案載入進行最佳化程式碼詳解

看更多