JS動(dòng)態(tài)插入腳本和插入引用外部鏈接腳本的方法
在日常開發(fā)中,經(jīng)常遇到 js 動(dòng)態(tài)插入腳本 。
什么是 js 動(dòng)態(tài)插入腳本 ?
指的是在頁面加載時(shí)不存在,但將來的某一時(shí)刻通過修改該 DOM 動(dòng)態(tài)添加的腳本。和操作 HTML 元素一樣。
js 動(dòng)態(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 代碼可以正常運(yùn)行。但在 IE 中,則會(huì)導(dǎo)致錯(cuò)誤。IE 將 <script> 視為一個(gè)特殊的元素,不允許 DOM 訪問其子節(jié)點(diǎn)。不過,可以使用
<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 中運(yùn)行。Safari3.0 之前的版本雖然不能正確的支持 text 屬性,但卻允許使用文本節(jié)點(diǎn)技術(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é)點(diǎn)方法,因?yàn)槌?IE(在 IE 中會(huì)導(dǎo)致拋出錯(cuò)誤),所有的瀏覽器都支持之中方式。如果這行代碼拋出了錯(cuò)誤,那么說明是 IE,于是就必須使用 text 屬性了,整個(gè)過程可以用以下函數(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');}");;
二、插入引用外部文件
動(dòng)態(tài)加載外的外部 JavaScript 文件能夠立即運(yùn)行,比如下面的 <script> 元素。
<script type="text/javascript" src="client.js"></script>
而創(chuàng)建這個(gè)節(jié)點(diǎn)的 DOM 代碼如下所示:
var script = document.createElement("script"); script.type = "text/javascript"; script.src = "client.js"; document.body.appendChild(script);
顯然這里的 DOM 如實(shí)的反映了相應(yīng)的 HTML 代碼。不過執(zhí)行最后一行代碼把 <script> 元素添加到頁面之前,是不會(huì)下載外部文件的。也可以把這個(gè)元素添加到 <head> 元素中效果相同。
但是怎么知道這個(gè)腳本文件加載完成了呢,因?yàn)槲覀冇行┖瘮?shù)需要在腳本加載完成生效后才能開始執(zhí)行。
經(jīng)過對網(wǎng)絡(luò)上資源的搜索,我發(fā)現(xiàn)在 IE 瀏覽器中可以使用 <script> 元素的 onreadystatechange 來監(jiān)控加載狀態(tài)的改變,并通過判斷它的 readyState 是 loaded 或 complete 來判斷腳本是否加載完成。而非 IE 瀏覽器可以使用 onload 來直接判斷腳本是否加載完成。
所以一個(gè)簡單的實(shí)現(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);
最后可以合并一個(gè) js 動(dòng)態(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動(dòng)態(tài)插入腳本和插入引用外部鏈接腳本的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 如何讓動(dòng)態(tài)插入的javascript腳本代碼跑起來。
- JS把內(nèi)容動(dòng)態(tài)插入到DIV的實(shí)現(xiàn)方法
- JSP中使用JavaScript動(dòng)態(tài)插入刪除輸入框?qū)崿F(xiàn)代碼
- 深入理解javascript動(dòng)態(tài)插入技術(shù)
- JavaScript動(dòng)態(tài)插入script的基本思路及實(shí)現(xiàn)函數(shù)
- js動(dòng)態(tài)在form上插入enctype=multipart/form-data的問題
- JavaScript插入動(dòng)態(tài)樣式實(shí)現(xiàn)代碼
- 得到文本框選中的文字,動(dòng)態(tài)插入文字的js代碼
相關(guān)文章
js獲取本機(jī)的外網(wǎng)/廣域網(wǎng)ip地址完整源碼
通過js獲取本機(jī)的外網(wǎng)和廣域網(wǎng)ip地址的方法有很多,本文為大家介紹個(gè)不錯(cuò)的方法,希望對大家有所幫助2013-08-08js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕,實(shí)例分析了javascript倒計(jì)時(shí)效果的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06layui表單提交到后臺(tái)自動(dòng)封裝到實(shí)體類的方法
今天小編就為大家分享一篇layui表單提交到后臺(tái)自動(dòng)封裝到實(shí)體類的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09微信小程序?qū)崿F(xiàn)的點(diǎn)擊按鈕 彈出底部上拉菜單功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的點(diǎn)擊按鈕 彈出底部上拉菜單功能,結(jié)合實(shí)例形式分析了action-sheet組件及事件響應(yīng)簡單使用技巧,需要的朋友可以參考下2018-12-12

用JavaScript實(shí)現(xiàn)仿Windows關(guān)機(jī)效果

微信小程序自定義toast彈窗效果的實(shí)現(xiàn)代碼

簡易 Javascript 調(diào)試包 Debug包