让多个HTML页面 使用 同一段HTML代码

Posted 2021-02-06 寻觅beyond

需求背景

　　一个网站有多个网页；一个网页，可以分为很多部分，举个例子，下面是一个特别简单的网页结构：

　　 

　　 一般情况下，footer都是用于标识网站的相关信息（备案、联系方式、制作方），每一个页面都是相同的，如果又100个这样的页面，如果在每一个页面都写这么一段html代码，那么，无疑是特别难受的，另外，这个也不利于修改，一旦要修改，每个页面都要改一次，即使利用编辑器的全局替换，那也是不放心的，万一有一个页面在写代码的时候，和其他页面有点不同，全局替换也是有问题的。

 

 

php解决

　　如果有用过php的话，就知道，可以将footer的html代码单独写在一个footer.html文件中，然后在每一个页面的footer位置，加一行include代码即可：

<?php include "footer.html" ?>

　　

 

JSP解决

　　如果是jsp的话，可以使用一个include指令即可：

<%@ include file="footer.html" %>

　　　　

 

问题

　　如果你的项目，前端和后端没有分离（一个代码库），那就没多大问题，反正后端和后端都是一组人写。

　　如果你的前端和后端相分离（两个代码库），那么修改两个代码库的代码，无疑是有点麻烦，单着还不是问题。问题是：在当今精通某种技术的时代，既擅长前端又擅长后端的程序员也并不多。

　　更大的问题：运行环境。

　　1、如果线上服务器没有安装php怎么办呢？

　　2、如果后端不是使用java，不用tomcat当服务器，那怎么能用jsp呢？

 

 

服务器端渲染 与 客户端渲染

　　php和jsp属于服务器端渲染，依赖于服务器的软件，所以会有点局限性。

　　但是，浏览器的DOM渲染，是属于客户端渲染，DOM渲染的问题就几乎没有了，正好，操作DOM的javascript是每个浏览器都支持的（DOM渲染可能会比服务器端渲染要稍微慢一点）。

 

 

JavaScript解决

　　可以这样做， 在footer的位置，只写一个<div>标签， 并且设置标签id：

<div id="footer"></div>

　　

　　定义一个JavaScript的函数，内容如下，目的就是设置上面这个<div>的innerHTML

/**
 * 用户填充footer内容的代码
 */
function fillFooterDOM() {
	var footer = document.getElementById("footer");

	var content = "";
	content += "所有页面都要显示的内容，放到这里"

	footer.innerHTML = content;
}

　　

　　将上面这个函数，放到每一个前端页面都会加载的js文件中（公共文件），并且在window.onload中调用这个函数即可。上面用的是原生的JavaScript，考虑到兼容性，可以使用JQuery来实现，然后在$(document).ready()中调用这个方法