js實作動態載入腳本的方法實例匯總_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

js實作動態載入腳本的方法實例匯總_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:34 PM

js 載入動態

本文實例講述了js實作動態載入腳本的方法。分享給大家參考，具體如下：

最近公司的前端地圖產品需要做一下模組劃分，希望用戶用到哪一塊的功能再加載哪一塊的模組，這樣可以提高用戶體驗。

所以到處查資料研究js動態腳本的加載，不過真是讓人傷心啊！，網路上幾乎都是同一篇文章，4種方法，討厭其中拷貝別人成果的人，也不加個原文的連結。哎！關鍵是最後一種方法還有點錯誤。經過兩天的研究查閱資料，在這裡和大家分享一下。

首先我們需要一個被載入的js文件，我在一個固定資料夾下建立了一個package.js，打開後在裡面寫一個方法functionOne，很簡單，程式碼如下：

function functionOne(){
  alert("成功加载");
}

登入後複製

後面的html檔案都建立在同一個目錄下。

方法一：直接document.write

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

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加载js脚本
      document.write("<script src='package.js'><\/script>");
      //加载一个按钮
      document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>");
      //如果马上使用会找不到，因为还没有加载进来，此处会报错
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="初始化加载" onclick="init()"/>
</body>
</html>

登入後複製

透過document.write的方式可以往頁面寫入腳本，如程式碼所示，點擊按鈕「初始化載入」後可以載入package.js文件，但立即運行裡面的方法functionOne會找不到此方法，報告錯誤，而點擊第二個按鈕（透過document.write動態建立的「測試運行效果」）發現可以執行，此時腳本已經載入完畢了。由於這種方式是非同步載入（一邊繼續後面的程式碼，一邊額外開一個執行緒執行需要載入的腳本），並且document.write會重寫介面，明顯不實用。

方法二：動態改變已有script的src屬性

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

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

登入後複製

此種方法的好處是不會改變介面元素，不至於重寫介面元素，但是同樣是非同步加載，會有同樣的問題。

方法三：動態建立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將

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1422

Laravel 教程

1316

PHP教程

1267

C# 教程

1239

Related knowledge

將VirtualBox固定磁碟轉換為動態磁碟，反之亦然 Mar 25, 2024 am 09:36 AM

在建立虛擬機器時，系統會要求您選擇磁碟類型，您可以選擇固定磁碟或動態磁碟。如果您選擇了固定磁碟，後來意識到需要動態磁碟，或者相反，該怎麼辦?好!你可以把一種轉換成另一種。在這篇文章中，我們將看到如何將VirtualBox固定磁碟轉換為動態磁碟，反之亦然。動態磁碟是一種虛擬硬碟，它最初具有較小的大小，隨著您在虛擬機器中儲存數據，其大小會相應增長。動態磁碟在節省儲存空間方面非常高效，因為它們只佔用所需的主機儲存空間。然而，隨著磁碟容量的擴展，可能會稍微影響電腦的效能。固定磁碟和動態磁碟是虛擬機器中常用的

在Illustrator中載入插件時出錯[修復] Feb 19, 2024 pm 12:00 PM

啟動AdobeIllustrator時是否會彈出載入插件時出錯的訊息？一些Illustrator用戶在打開該應用程式時遇到了此錯誤。訊息後面緊跟著一系列有問題的插件。此錯誤提示表示已安裝的插件有問題，但也可能是由於VisualC++DLL檔案損壞或首選項檔案受損等其他原因所引起。如果遇到此錯誤，我們將在本文中指導您修復問題，請繼續閱讀以下內容。在Illustrator中載入外掛程式時出錯如果您在嘗試啟動AdobeIllustrator時收到「載入外掛程式時出錯」的錯誤訊息，您可以使用以下用途：以管理員身

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

Stremio字幕不工作；載入字幕時出錯 Feb 24, 2024 am 09:50 AM

字幕在你的WindowsPC上不能在Stremio上運行嗎？一些Stremio用戶報告說，影片中沒有顯示字幕。許多用戶報告說他們遇到了一條錯誤訊息，上面寫著「載入字幕時出錯」。以下是與此錯誤一起顯示的完整錯誤訊息：載入字幕時出錯載入字幕失敗：這可能是您正在使用的插件或您的網路有問題。正如錯誤訊息所說，可能是您的網路連線導致了錯誤。因此，請檢查您的網路連接，並確保您的網路運作正常。除此之外，這個錯誤的背後可能還有其他原因，包括字幕加載項衝突、特定影片內容不支援字幕以及Stremio應用程式過時。如

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

插入超連結時Outlook凍結 Feb 19, 2024 pm 03:00 PM

如果您在插入超連結時出現在Outlook時遇到凍結問題，可能是因為網路連線不穩定、Outlook版本舊、防毒軟體幹擾或加載項衝突等原因。這些因素可能導致Outlook無法正常處理超連結操作。修正插入超連結時Outlook凍結的問題使用以下修復程式解決插入超連結時Outlook凍結的問題：檢查已安裝的加載項更新Outlook暫時停用您的防毒軟體，然後嘗試建立新的使用者設定檔修復辦公室應用程式卸載並重新安裝Office我們開始吧。 1]檢查已安裝的加載項可能是Outlook中安裝的某個加載項導致了問題。

See all articles

js實作動態載入腳本的方法實例匯總_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題