使用过php语言的人都知道，在php中可以使用include或者require把一个文件引入进来，但是，当我们只是用html时，问题就来了，html中根本不存在include类似方法。 那么，借助html的标签是否可以实现类似的效果呢？我首先想到了iframe和script标签，而且，首选script标签，因为iframe在网上有各种批斗，能不用就不用。 两个标签都有一个共性，能够引入文件路径然后加载文件内容，但是，script载入的内容会被当成js代码执行，为了屏蔽它的执行，我选择了`type="text/tpl"`这种伪类型（非规范类型）屏蔽了它的执行，可惜的是，最终没能找到方法提取加载进来的内容，只好放弃。 剩下还有iframe标签，它的载入和内容提取比较简单，`window.frames['test'].document.body.innerHTML`即可取得内容。 下面是具体实现： 注：这里只介绍基于jQuery的实现，使用原生javascript的同学自己模仿实现。 使用jQuery实现，又分为基于ajax请求的实现和基于iframe请求的实现。两种的实现原理都是通过不同方式的请求加载文件内容，然后提取出来，替换html中的include标签`<div class="include" file="header.html"></div>` 1. 基于ajax请求的实现需要依赖服务器环境，非服务器环境ajax请求不会生效，这点也是很多朋友在使用ajax会遇到的：突然发现，为啥我的ajax请求不成功啊，点击了没反应，最后才发现，原来是使用了本地文件打开方式：`file://D:/www/test.html`，正确应该是`http://localhost/test.html`才能请求ajax。以下是实现代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML标签自动引入</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://zjmainstay.cn/jquery/jquery-1.8.2.min.js"></script>
</head>
<body>
<div class="include" file="header.html"></div>
<div>中间部分</div>
<div class="include" file="footer.html"></div>
<script type="text/javascript">
$(".include").each(function() {
var file = $(this).attr("file");
if(!!file) {
var thisObj = $(this);
$.get(file, function(html) {
thisObj.after(html).remove();
});
}
});
</script>
</body>
</html>
2. 基于iframe请求的实现是要使用jQuery伪造一个隐藏的iframe标签出来请求文件内容，获取后移除它。
以下是实现代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML标签自动引入</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://www.zjmainstay.cn/jquery/jquery-1.8.2.min.js"></script>
</head>
<body>
<div class="include" file="header.html"></div>
<div>中间部分</div>
<div class="include" file="footer.html"></div>
<script type="text/javascript">
$(".include").each(function(){
var file = $(this).attr("file");
if(!!file) {
var $includeObj = $(this);
$("<iframe style='display:none'>").attr("src", file).attr("name", file).appendTo($("body")).load(function(){
$includeObj.after($(window.frames[file].document).text()).remove();
$(this).remove();
});
}
});
</script>
</body>
</html>
最后，由一位朋友@小二提醒，使用jQuery的load方法可以直接载入文件内容而不需要发送ajax的http请求，是iframe的完美替代，因此有了第三种方法： 3. 基于jQuery load方法实现以下是实现代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML标签自动引入</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://www.zjmainstay.cn/jquery/jquery-1.8.2.min.js"></script>
</head>
<body>
<div class="include" file="header.html"></div>
<div>中间部分</div>
<div class="include" file="footer.html"></div>
<script type="text/javascript">
$(".include").each(function(){
if(!!$(this).attr("file")) {
var $includeObj = $(this);
$(this).load($(this).attr("file"), function(html){
$includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
})
}
});
</script>
</body>
</html>
至此，基于js至此的html中嵌套html功能实现。 希望还有更好实现方法的朋友提出来，大家一起学习一下。
注：本地化环境下（file://环境），Chrome不支持跨域，也就是效果失败。
演示：未经同意禁止转载！
转载请附带本文原文地址：html中引入html，首发自 Zjmainstay学习笔记
