怎样实现JS动态插入脚本和插入引用外部链接脚本-tutorial js-php.cn

这次给大家带来怎样实现JS动态插入脚本和插入引用外部链接脚本，实现JS动态插入脚本和插入引用外部链接脚本的 注意事项 有哪些，下面就是实战案例，一起来看一下。

什么是 js 动态插入脚本 ?

指的是在页面加载时不存在，但将来的某一时刻通过修改该 DOM 动态添加的脚本。和操作 HTML 元素一样。

js 动态插入脚本也有两种方式：插入 JavaScript 代码和插入外部文件。

一、直接插入 javascript 代码

function sayHi() { alert("hi"); } Salin selepas log masuk 从逻辑上讲，下面的 DOM 代码是有效的：

var script = document.createElement("script"); script.type = "text/javascript"; script.appendChild(document.createTextNode("function sayHi() {alert('hi');}")); document.body.appendChild(script); Salin selepas log masuk 在 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); Salin selepas log masuk 经过修改之后的代码可以在 IE、Firefox、Opera 和 Safari3.0 中运行。Safari3.0 之前的版本虽然不能正确的支持 text 属性，但却允许使用文本节点技术来指定代码。如果需要兼容早期版本的 Safari，可以使用下列代码：

动态加载外的外部 JavaScript 文件能够立即运行，比如下面的 元素。

Salin selepas log masuk 而创建这个节点的 DOM 代码如下所示：

var script = document.createElement("script"); script.type = "text/javascript"; script.src = "client.js"; document.body.appendChild(script); Salin selepas log masuk 显然这里的 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); Salin selepas log masuk Opera、FF、Chrome 等：

var script = document.createElement("script"); var url = 'http'; script.setAttribute("type","text/javascript"); script.onload = function() { alert("加载成功啦！"); } script.setAttribute("src",url); Salin selepas log masuk 最后可以合并一个 js 动态插入脚本 的 function ;

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

怎样实现JS动态插入脚本和插入引用外部链接脚本