常见的js动态加载技术之一是把一些逻辑独立的js脚本文件单独加载。这样做的好处是,比如可减少不必要的js脚本文件的加载,以提高网页浏览器的速度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态加载js</title>
<script type="text/javascript">
function loadJs(){
var theHead = document.getElementsByTagName('head').item(0);
var myScript = document.createElement('script');
myScript.src = './my.js';
myScript.type = 'text/javascript';
myScript.defer = true;
theHead.appendChild(myScript);
}
</script>
</head>
<body style="text-align:center">
<p>
<input type="button" value="动态加载JS" onclick="loadJs()"/>
</p>
</body>
</html>
js代码:
var test = function(){
alert("动态加载js文件");
}
test();
效果:
点击按钮之后,执行js代码片段。
解析:本例采用动态创建的方式来动态加载js,这是较为合理的一种方式。首先,创建一个js的DOM对象,然后,为它配置好脚本的地址和类型,最后把它挂载到网页的头部,也就是head部分。只有当用户单击“OK”按钮之后,“my.js”这个脚本文件才会被加载到网页中执行。