JavaScript 动态添加脚本的简单方法
作者:微光时间:2026-10-30 15:09:28浏览:490
本文介绍在JavaScript中动态创建和添加脚本标签的两种方法。通过createScript函数可异步加载外部JS文件,兼容所有浏览器;createModule方法用于添加内联脚本,并处理IE8以下版本的兼容性问题,确保脚本内容正确执行。
动态脚本加载概述
实现JavaScript文件的异步加载或JS模块的异步加载,该方案兼容所有浏览器,包括IE浏览器,技术参考源自《JavaScript高级程序设计》。
外部脚本加载方法
方法用于创建一个script标签并将其添加到body标签中。
内联脚本与IE兼容处理
方法用于创建一个script脚本标签,如果在IE8以下的版本运行会抛出异常,在异常捕获模块中执行script.text兼容IE添加js的脚本内容。
<button id="demo">js文件</button>
<button id="demo1">js模块</button>
<script type="text/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);
}
//这里首先会尝试标准的DOM方法,因为除了IE(在IE中会抛出错误),所有浏览器都支持这种方法,如果抛出错误则说明是IE,于是就必须使用tezt属性了
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);
}
document.body.appendChild(script);
}
</script>
以上就是小编为大家带来的javascript 动态脚本添加的简单方法全部内容了,希望大家多多支持本站~
作者最新文章
JavaScript零基础入门:从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript:void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化:FormData与URLSearchParams用法详解
2026-11-03 23:13:21
