JavaScript网页实例：在网页里动态加载JavaScript

最新推荐文章于 2024-04-23 16:44:07 发布

原创最新推荐文章于 2024-04-23 16:44:07 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

cnblog博客：https://www.cnblogs.com/f6056/

文章标签：

#javascript #前端 #开发语言

Javascript 同时被 2 个专栏收录

57 篇文章

订阅专栏

基础案例

39 篇文章

订阅专栏

本文介绍如何在网页中实现JavaScript动态加载，通过点击【动态加载】按钮，延迟加载./myjs.js脚本，提升网页浏览速度。涉及关键函数appendChild()和defer属性。

把一些逻辑独立的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的头部dom
			var 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;