让多个HTML页⾯使⽤同⼀段HTML代码
需求背景
  ⼀个⽹站有多个⽹页；⼀个⽹页，可以分为很多部分，举个例⼦，下⾯是⼀个特别简单的⽹页结构：
  ⼀般情况下，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内容的代码
*/html制作一个网页
function fillFooterDOM() {
var footer = ElementById("footer");
var content = "";
content += "所有页⾯都要显⽰的内容，放到这⾥"
footer.innerHTML = content;
}
  将上⾯这个函数，放到每⼀个前端页⾯都会加载的js⽂件中（公共⽂件），并且在load中调⽤这个函数即可。上⾯⽤的是原⽣的JavaScript，考虑到兼容性，可以使⽤JQuery来实现，然后在$(document).ready()中调⽤这个⽅法

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。