# 如何动态的在网页里加载插入js脚本
# 快速导航
# 前言
把一些逻辑独立的js脚本文件单独加载,是一种很常见的js动态加载技术,这样的好处有很多,可以减少不必要的js脚本的文件加载,以提高网页浏览的速度
在优化代码里,很多都是通过异步加载去优化项目的,那么动态的去加载js就变得非常重要了的
实现这个目的也很简单,如果你有接触过百度统计的代码,它就是动态的创建js然后插入到我们的网页当中去的
Ajax技术就是:在用户不刷新页面的情况下,动态的插入js到我们的页面当中实现的
# 具体实例代码如下所示
// 动态的加载js，例如:外部的js,myjs.js
function loadJs() {
// 获取html的头部dom
var theHead = document.getElementsByTagName('head').item(0);
// 创建脚本的dom对象实例,创建script
var myScript = document.createElement('script');
// 给script添加属性
myScript.src = './myjs.js' // 指定脚本路径,路径可以是绝对路径,也可以是相对路径
myScript.type= 'text/javascript'; // 指定脚本类型,其实不写也没事,默认就是js
myScript.defer = true; // 程序下载完后在解析和执行
theHead.appendChild(myScript); // 把dom挂载到头部
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
html代码如下
<input type="button" value="动态的加载js" onclick="loadJs()" />
1
# 解析
上面就是动态的创建script的方式来动态加载js,这也是一种比较常见的方式,创建一个js的DOM对象,然后为它配置好脚本的来源地址和类型,最后把它挂载到网页的头部,也就是head部分
分享
留言
解答
收藏
