不同html页面相同部分代码的提取

189 阅读 0 评论 125 点赞

我是靠谱客的博主踏实冬天，最近开发中收集的这篇文章主要介绍不同html页面相同部分代码的提取，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

问题重现

在编写html页面时，遇到一个问题，在某个站点中绝大部分页面都拥有着相同的导航栏，并且这个导航栏中的菜单和连接，将会不断的改变。虽然说，可以在每次改变以后进行逐个页面的更改，但是也显得十分麻烦，而且容易落下某个页面，造成不便。

解决方法

其实采用的是Ajax的方法来解决这个问题的。
在html中，将相同的部分提取出来放到另外一个文件当中，如menu.dat：

<ul>
<li>
<a href="001.html">001</a>
</li>
<li>
<a href="002.html">002</a>
</li>
</ul>

然后，修改html文件，将该部分以div来代替，最后使用Ajax获取menu.dat的内容进行替代。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<header>
<div id="main_menu"></div>
</header>
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("main_menu").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "menu.dat", true);
xmlhttp.send();
</script>
</body>
</html>

其实，不仅仅html可以，jsp也是可以采用相同的方法。而且，在menu.dat中也可以把css标签也可以放进去，最后在html中获取到后也是会处理的。这种方法也不是没有缺点的，例如在这里不可以使用像jsp这种在服务器解析的标签，还比如说struts标签等，如果有需要这些标签的同学建议把html文件中相同的部分另外做个页面，最后直接往里引整个html页面。