在日常開發中，經常遇到 js 動態插入腳本 。
什么是 js 動態插入腳本 ?
指的是在頁面加載時不存在，但將來的某一時刻通過修改該 DOM 動態添加的腳本。和操作 HTML 元素一樣。
js 動態插入腳本也有兩種方式：插入 JavaScript 代碼和插入外部文件。
一、直接插入 javascript 代碼
<script type="text/javascript">function sayHi() { alert("hi");}</script>從邏輯上講，下面的 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 將 <script> 視為一個特殊的元素，不允許 DOM 訪問其子節點。不過，可以使用
<script> 元素的 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，可以使用下列代碼：
var script = document.createElement("script");script.type = "type/javascript";var code = "function sayHi() {alert('hi');}";try { script.appendChild(document.createTextNode(code));} catch (ex) { script.text = code;}document.body.appendChild(script)這里首先嘗試標準的 DOM 文本節點方法，因為除了 IE（在 IE 中會導致拋出錯誤），所有的瀏覽器都支持之中方式。如果這行代碼拋出了錯誤，那么說明是 IE，于是就必須使用 text 屬性了，整個過程可以用以下函數來表示：
function loadScriptString(code) { var script = document.createElement("script"); script.type = "text/javascript"; try { script.appendChild(document.createTextNode(code)); } catch (ex) { script.text = code; } document.body.appendChild(script);}loadScriptString("function sayHi() {alert('hi');}");;二、插入引用外部文件
動態加載外的外部 JavaScript 文件能夠立即運行，比如下面的 <script> 元素。
<script type="text/javascript" src="client.js"></script>
而創建這個節點的 DOM 代碼如下所示：
var script = document.createElement("script");script.type = "text/javascript";script.src = "client.js";document.body.appendChild(script);顯然這里的 DOM 如實的反映了相應的 HTML 代碼。不過執行最后一行代碼把 <script> 元素添加到頁面之前，是不會下載外部文件的。也可以把這個元素添加到 <head> 元素中效果相同。
但是怎么知道這個腳本文件加載完成了呢，因為我們有些函數需要在腳本加載完成生效后才能開始執行。
經過對網絡上資源的搜索，我發現在 IE 瀏覽器中可以使用 <script> 元素的 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 ;
function loadScript(url, callback) { callback = typeof callback === 'function' ? callback : function() {}; var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; script.onreadystatechange = function() { if(this.readyState == "loaded" || this.readyState == "complete"){ callback(); } } script.onload = callback; head.appendChild(script);}總結
以上所述是小編給大家介紹的JS動態插入腳本和插入引用外部鏈接腳本的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
