js引用公共头部、尾部html页面的方法
严心水
在写一些纯前端页面的时候，存在一些公共头部、尾部页面，如果后期项目开发中进行修改（如增加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>
类似资料：