2014年07月15日 14:22:26

html中引入html

作者: 
本文讲解如何实现在html文件中引入另一个html文件。
使用过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学习笔记
阅读( 15834 )
看完顺手点个赞呗:
(7 votes)

1.PHP cURL群:PHP cURL高级技术
2.正则表达式群:专精正则表达式
3. QQ联系(加请说明):QQ联系博主(951086941)
4. 邮箱:zjmainstay@163.com
5. 打赏博主:

网站总访问量: