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

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

伊谢尔伦
發布: 2017-07-21 15:21:04
原創
2630 人瀏覽過

動態建立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將

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板