JS動態(tài)插入腳本和插入引用外部鏈接腳本的方法

在日常開發(fā)中，經(jīng)常遇到 js 動態(tài)插入腳本。

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有玉樹免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

什么是 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 中，則會導(dǎo)致錯誤。IE 將 <script> 視為一個特殊的元素，不允許 DOM 訪問其子節(jié)點。不過，可以使用

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é)點技術(shù)來指定代碼。如果需要兼容早期版本的 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)

這里首先嘗試標(biāo)準(zhǔn)的 DOM 文本節(jié)點方法，因為除了 IE（在 IE 中會導(dǎo)致拋出錯誤），所有的瀏覽器都支持之中方式。如果這行代碼拋出了錯誤，那么說明是 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 如實的反映了相應(yīng)的 HTML 代碼。不過執(zhí)行最后一行代碼把 <script> 元素添加到頁面之前，是不會下載外部文件的。也可以把這個元素添加到 <head> 元素中效果相同。

但是怎么知道這個腳本文件加載完成了呢，因為我們有些函數(shù)需要在腳本加載完成生效后才能開始執(zhí)行。

經(jīng)過對網(wǎng)絡(luò)上資源的搜索，我發(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);
}

總結(jié)

以上所述是小編給大家介紹的JS動態(tài)插入腳本和插入引用外部鏈接腳本的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

文章名稱：JS動態(tài)插入腳本和插入引用外部鏈接腳本的方法
文章地址：http://www.rwnh.cn/article48/peohep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、網(wǎng)站維護、品牌網(wǎng)站制作、網(wǎng)站設(shè)計、用戶體驗、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

JS動態(tài)插入腳本和插入引用外部鏈接腳本的方法