如何實作JS動態插入腳本和插入引用外部連結腳本-js教程-PHP中文網

這次帶給大家怎麼實作JS動態插入腳本和插入引用外部連結腳本，實作JS動態插入腳本和插入引用外部連結腳本的 注意事項 有哪些，以下就是實戰案例，一起來看一下。

什麼是js 動態插入腳本?

#指的是頁面載入時不存在，但將來的某一時刻透過修改該DOM 動態新增的腳本。和操作 HTML 元素一樣。

js 動態插入腳本也有兩種方式：插入 JavaScript 程式碼和插入外部檔案。

一、直接插入javascript 程式碼

function sayHi() { alert("hi"); } 登入後複製 從邏輯上講，下面的DOM 程式碼是有效的：

var script = document.createElement("script"); script.type = "text/javascript"; script.appendChild(document.createTextNode("function sayHi() {alert('hi');}")); document.body.appendChild(script); 登入後複製 在Firefox、Safari、Chrome 和Opera 中，這些DOM 程式碼可以正常運作。但在 IE 中，則會導致錯誤。 IE 將 視為一個特殊的元素，不允許 DOM 存取其子節點。不過，可以使用

元素的text 屬性來指定JavaScript 程式碼，想下面的例子這樣：

var script = document.creatElement("script"); script.type = "text/javascript"; script.text = "function sayHi() {alert('hi');}"; document.body.appendChild(script); 登入後複製 經過修改後的程式碼可以在IE、Firefox、Opera 和Safari3 .0 中運行。 Safari3.0 之前的版本雖然無法正確的支援 text 屬性，但卻允許使用文字節點技術來指定程式碼。如果需要相容早期版本的Safari，可以使用下列程式碼：

動態載入外的外部JavaScript 檔案能夠立即運行，例如下面的 元素。

登入後複製 而創建這個節點的 DOM 程式碼如下所示：

var script = document.createElement("script"); script.type = "text/javascript"; script.src = "client.js"; document.body.appendChild(script); 登入後複製 顯然這裡的 DOM 如實的反映了對應的 HTML 程式碼。不過執行最後一行程式碼把 元素加到頁面之前，是不會下載外部文件的。也可以把這個元素加到 元素中效果相同。

但是怎麼知道這個腳本檔案載入完成了呢，因為我們有些函數需要在腳本載入完成生效後才能開始執行。

經過對網路上資源的搜索，我發現在IE 瀏覽器中可以使用 元素的onreadystatechange 來監控載入狀態的改變，並透過判斷它的readyState 是loaded 或complete 來判斷腳本是否加載完成。而非 IE 瀏覽器可以使用 onload 來直接判斷腳本是否載入完成。

所以一個簡單的實作過程看起來是下面這樣的：

IE 下：

var script = document.createElement("script"); var url = 'http:'; script.setAttribute("type","text/javascript"); script.onreadystatechange = function() { if(this.readyState == "loaded" || this.readyState == "complete"){ alert("加载成功啦！"); } } script.setAttribute("src", url); 登入後複製 Opera、FF、Chrome 等：

var script = document.createElement("script"); var url = 'http'; script.setAttribute("type","text/javascript"); script.onload = function() { alert("加载成功啦！"); } script.setAttribute("src",url); 登入後複製 最後可以合併一個js 動態插入腳本的function ;

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

如何實作JS動態插入腳本和插入引用外部連結腳本