把一些逻辑独立的JavaScript脚本文件单独加载,是一种常见的JavaScript动态加载技术。这样做的好处有很多,比如可以减少不必要的JavaScript脚本文件的加载,以提高网页浏览速度。
补充代码,要求用户在网页中点击【动态加载】按钮后,为html代码内需要加载的新增script脚本,脚本路径为./myjs.js,并要求文档加载完毕后再执行脚本。
myjs.js中的代码内容为:
alert("myjs.js文件已经加载完毕");
<!DOCTYPE HTML>
<html><head><meta http-equiv='Content-Type' content="text/html;charset=utf-8" />
</head><body><p style="text-align:center;"><input type="button" value="动态加载" id="button" /></p><script></script>
</body></html>
相关知识点:appendChild()、defer
参考代码:
function loadJs() {//获取html的头部domvar theHead = document.getElementsByTagName("head").item(0);var myScript = document.createElement("script");myScript.src = "./myjs.js";//指定脚本路径myScript.type = "text/javascript";//指定脚本类型myScript.defer = true;//程序下载完后再解析和执行theHead.appendChild(myScript);//把dom挂载到头部}var inputBtn = document.getElementById('button');inputBtn.onclick = loadJs;