JS動態(tài)插入腳本和插入引用外部鏈接腳本的方法
在日常開發(fā)中，經(jīng)常遇到 js 動態(tài)插入腳本 。
什么是 js 動態(tài)插入腳本 ?
指的是在頁面加載時不存在，但將來的某一時刻通過修改該 DOM 動態(tài)添加的腳本。和操作 HTML 元素一樣。
js 動態(tài)插入腳本也有兩種方式：插入 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 訪問其子節(jié)點。不過，可以使用
<script> 元素的 text 屬性來指定 JavaScript 代碼，想下面的例子這樣：
var script = document.creatElement("script");
script.type = "text/javascript";
script.text = "function sayHi() {alert('hi');}";
document.body.appendChild(script);
經(jīng)過修改之后的代碼可以在 IE、Firefox、Opera 和 Safari3.0 中運行。Safari3.0 之前的版本雖然不能正確的支持 text 屬性，但卻允許使用文本節(jié)點技術來指定代碼。如果需要兼容早期版本的 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 文本節(jié)點方法，因為除了 IE（在 IE 中會導致拋出錯誤），所有的瀏覽器都支持之中方式。如果這行代碼拋出了錯誤，那么說明是 IE，于是就必須使用 text 屬性了，整個過程可以用以下函數(shù)來表示：
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');}");;
二、插入引用外部文件
動態(tài)加載外的外部 JavaScript 文件能夠立即運行，比如下面的 <script> 元素。
<script type="text/javascript" src="client.js"></script>
而創(chuàng)建這個節(jié)點的 DOM 代碼如下所示：
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";
document.body.appendChild(script);
顯然這里的 DOM 如實的反映了相應的 HTML 代碼。不過執(zhí)行最后一行代碼把 <script> 元素添加到頁面之前，是不會下載外部文件的。也可以把這個元素添加到 <head> 元素中效果相同。
但是怎么知道這個腳本文件加載完成了呢，因為我們有些函數(shù)需要在腳本加載完成生效后才能開始執(zhí)行。
經(jīng)過對網(wǎng)絡上資源的搜索，我發(fā)現(xiàn)在 IE 瀏覽器中可以使用 <script> 元素的 onreadystatechange 來監(jiān)控加載狀態(tài)的改變，并通過判斷它的 readyState 是 loaded 或 complete 來判斷腳本是否加載完成。而非 IE 瀏覽器可以使用 onload 來直接判斷腳本是否加載完成。
所以一個簡單的實現(xiàn)過程看上去是下面這樣的：
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 動態(tài)插入腳本 的 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動態(tài)插入腳本和插入引用外部鏈接腳本的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了微信小程序人臉識別功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要是對XMLHttpRequest的緩存問題進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JavaScript 一行代碼,輕松搞定浮動快捷留言-V2升級版
前天熬了大半宿發(fā)了一篇[一行代碼輕松搞定快捷留言功能]，同時發(fā)布了V1.0beta版的快捷留言功能和源代碼，之所以是beta版，就是當時感覺雖然基本功能有了，但是還不夠完善，特性也不一定合理2010-04-04
在本篇文章里小編給大家整理了關于java實現(xiàn)單鏈表增刪改查的實例內容，需要的朋友們可以參考下。2019-08-08
JavaScript調試技巧之console.log()詳解
對于JavaScript程序的調試，相比于alert()，使用console.log()是一種更好的方式，原因在于：alert()函數(shù)會阻斷JavaScript程序的執(zhí)行，從而造成副作用；而console.log()僅在控制臺中打印相關信息，因此不會造成類似的顧慮2014-03-03
javaScript 實現(xiàn)重復輸出給定的字符串的常用方法小結
這篇文章主要介紹了javaScript 實現(xiàn)重復輸出給定的字符串的常用方法,總結分析了JavaScript重復輸出給定字符串的4種常見操作技巧,需要的朋友可以參考下2020-02-02
如果沒有明確的指定類型,那么TypeScript會依照類型推論（Type Inference）的規(guī)則推斷出一個類型,下面這篇文章主要給大家介紹了關于TypeScript類型推論與類型斷言的相關資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了小程序自定義彈框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
今天小編就為大家分享一篇淺談layui框架自帶分頁和表格重載的接口解析問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
大家好，本篇文章主要講的是JavaScript中深拷貝與淺拷貝詳解，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下2022-02-02