码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-01-28 23:51:54      阅读:538      评论:0      收藏:0      [点我收藏+]

标签:后端   结构   环境   image   window   fill   设置   script   ntb   

 

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

 技术分享图片

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

 

PHP解决

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

<?php include "footer.html" ?>

  

JSP解决

  jsp

  

 

问题

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

  如果你的前端和后端相分离(两个代码库),那么修改两个代码库的代码,无疑是有点麻烦,单着还不是问题。问题是:在当今精通某种技术的时代,既擅长又擅长后端的猿哥实在不多。

  更大的问题:运行环境。如果线上服务器没有安装php怎么办呢?如果用不了jsp呢?

 

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

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

  但是,浏览器的DOM渲染,是属于客户端渲染,DOM渲染的问题就几乎没有了,正好,操作DOM的JavaScript是每个浏览器都支持的。

 

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()中调用这个方法

 

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

标签:后端   结构   环境   image   window   fill   设置   script   ntb   

原文地址:https://www.cnblogs.com/-beyond/p/10332147.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!