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

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

maxu_now

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

阅读量2.5k

点赞数 2

本文链接：https://blog.csdn.net/free_pi/article/details/109389889

版权

在写一些纯前端页面的时候，存在一些公共头部、尾部页面，如果后期项目开发中进行修改（如增加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>