js引用公共头部、尾部html页面的方法

最新推荐文章于 2023-01-05 10:50:55 发布

原创最新推荐文章于 2023-01-05 10:50:55 发布 · 2.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #jquery #javascript

本文介绍了一种在前端开发中提高效率的方法，通过HTML imports引用公共头部和尾部页面，避免了每次修改都需要更新多个HTML文件的问题。示例中展示了如何使用link标签导入footer.html，并通过JavaScript将导入的内容插入到页面指定位置，实现页面动态加载公共底部。这种方法简化了维护工作，提高了代码复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写一些纯前端页面的时候，存在一些公共头部、尾部页面，如果后期项目开发中进行修改（如增加id或修改class时），需要每个html页面都进行修改，浪费时间。

引用方法

<!--footer.html页面内容如下：-->
</head>
	<body>
		<footer class="footer">
			<ul>
				<a href="javascript:void(0);">分类</a>
				<a href="javascript:void(0);">分类</a>
				<a href="javascript:void(0);">分类</a>
				<a href="javascript:void(0);">分类</a>
			</ul>	
		</footer>
	</body>
</html>

例：页面A中想引用footer.html页面，则

<!--在head中使用link标签引用footer.html，并给予一个id -->
<head>
	<link rel="import" href="footer.html" id="sc_footer"/>
</head>	
<!--在A页面中想要引入footer.html的位置新建一个空的div -->
	<div id="footer"></div>

<!--下方script标签中，将引入的footer.html页面输出到footer的div中 -->
<script type="text/javascript">
	document.getElementById("footer").innerHTML = sc_footer.import.body.innerHTML;
</script>