本地合并

将HTML硬拆成头、尾、内容三个部分的文件，在预览或者发布之前用脚本手工合并。

自己写代理

（比如用node），请求文件的时候自动加上头尾文件。

iframe

这个方法比较古老，以前很常用，但因为总是容易有一些导航链接等等的问题，而且页面结构的杂乱、不易被搜索引擎搜索，因此，目前大家普遍使用其他的方法替代进行替代了。

利用js或ajax从服务器上进行请求，取回需要的公共页面然后插入页面

注意 因为有请求，所以需要有服务器环境才能正常使用，若是使用本地文件打开，则会出现跨域问题？谷歌浏览器会有报错信息：Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
若只想在开发时调试使用可参考Chrome浏览器开启Ajax跨域访问调试进行解决

以jQuery为例：

1
2
3
4
5
6
<script src="js/jquery.min.js"></script>
/*导入尾部*/
$(document).ready(function(){
	$(".headerpage").load("header.html"); 
	$(".footer").load("page/footer.html");
});

请求的html文件里不需要是完整的HTML，这包含标签内容即可
例如：

1
2
3
4
5
6
7
8
9
<!--footer.html页面-->
<footer>
   <ul class="g-flex">
      <li class="g-flex-auto"><a href="#" class="i-b">首页</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">分类</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">订单</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">我的</a></li>
   </ul>
</footer>

使用ajax动态拉取填充。

h5新增的embed标签：

1
<embed type="text/html" src="header.html" />

用 JavaScript 填充內容

所有的页面都有：

1
2
3
<div id="header"></div>
<div id="footer"></div>
<script type="text/javascript" src="loader.js">
：
1
2
3

document.getElementById("header").innerHTML = "....";
document.getElementById("footer").innerHTML = "....";

用php写前端页面:

1
2
3
<?php 
    include "./public/sidebar.html"
 ?>

服务端shtml包含;

web服务器（比如IIS）中设定包含;

后台模板引擎处理（字符串拼接）。

总结一些页面公共头部统一部署方法–前端
html 引入公共的头部和底部
Html页面对于导航及底部栏等公共部分的引用
网页公共部分引入的几种方法简述
iframe异步加载性能优化及无阻塞加载

最后更新： 2019年10月13日 22:04

原始链接： http://ldc5886.github.io/2019/10/01/%E9%A1%B5%E9%9D%A2%E5%85%AC%E5%85%B1%E9%83%A8%E5%88%86%E9%83%A8%E5%88%86%E9%83%A8%E7%BD%B2%E6%96%B9%E6%B3%95/

赏
× 请我吃糖~
打赏二维码