javascript 动态脚本添加的简单方法

JavaScript 动态脚本添加：轻松实现文件与模块的异步加载

随着网络技术的发展，JavaScript 在前端开发中扮演着越来越重要的角色。本文将向大家介绍一种简单而有效的 JavaScript 动态脚本添加方法，支持所有浏览器，包括 IE。这个方法可以帮助我们实现 js 文件和模块的异步加载，提升网页的加载速度和用户体验。

让我们了解一下两个关键函数：createScript 和 createModule。

1. createScript 方法：用于创建一个 script 标签并添加到 body 标签中，实现 js 文件的异步加载。当点击 ID 为“demo”的按钮时，将加载一个外部的 js 文件。

示例代码如下：

```javascript

document.getElementById("demo").onclick = function () {

createScript("../../js/jquery-1.8.3.min.js");

}

function createScript(url) {

var script = document.createElement("script");

script.type = "text/javascript";

script.src = url;

document.body.appendChild(script);

}

```

2. createModule 方法：用于创建一个 script 脚本的标签，尝试使用标准的 DOM 方法添加模块代码。如果抛出错误（说明是 IE 浏览器），则使用 text 属性添加 js 模块代码。当点击 ID 为“demo1”的按钮时，将加载一个 js 模块。

示例代码如下：

```javascript

document.getElementById("demo1").onclick = function () {

createModule("function sayHi(){alert('Hi !')}");

}

function createModule(code) {

var script = document.createElement("script");

script.type = "text/javascript";

try {

script.appendChild(document.createTextNode(code));

} catch (ex) {

script.text = code; // 兼容 IE 添加 js 模块代码

}

document.body.appendChild(script);

}

```

以上就是 JavaScript 动态脚本添加的简单方法。通过这两个函数，我们可以轻松实现 js 文件和模块的异步加载，提升网页的加载性能。这种方法在所有浏览器中都能正常工作，包括 IE。希望本文能对大家有所帮助，也请大家多多支持我们的 SEO 优化工作。

JavaScript 的动态脚本添加是一种非常实用的技术，可以帮助我们更好地管理和优化网页。无论你是前端开发者还是 SEO 优化师，都可以尝试使用这种方法来提升你的工作效率和网站性能。如果你对本文有任何疑问或建议，欢迎在评论区留言，我们会尽快回复。再次感谢大家的阅读和支持！