首页 > html教程 > 正文

Html中引入外部页面的方法

原创 2018-03-29 16:31:09 0 149
赞助会员专享特权
通常一个网站的head,foot,rightBar(右侧的条目)都是相同的,这部分内容可以通过引入的方式,否则一旦需要修改,就需要修改十个,二十个,乃至更多的页面,是一项既繁琐但又毫无意义的工作。借助于PHP或者JSP,使用include能够轻松解决此问题,但是如果脱离后端语言,从前端的角度,能不能解决这个问题呢?

1、借助于iframe

首先,最容易想到的应该是使用iframe,虽然html5废除了frame,但是依旧保留了iframe,我们仍可以继续使用,iframe有一个frameboder属性,设置属性值为0或者为no,去除iframe的边框。然后将scrolling设为no。这是完全可行的,不过记得要在服务器环境下运行。

 var frame = document.getElementsByTageName("iframe")[0];
    frame.contentWindow.document.XXX方法,
    如frame.contentWindow.document.querySelector("#btn");//获取iframe中Id为btn的节点.

因为此前没有使用iframe来引入头部的经验,考虑到头部通常除了跳转之外,另一个作用应该是定位,在页面较长时,通过点击,准确定位到某处。页面的跳转,使用iframe引入并无影响,那么锚点呢?这个需要试一试才知道。
在此,再补充一点关于锚点的知识:
锚点可以跳转到当前页面的相应位置,还可以跳转到其它页面的相应位置。
实现锚点有两种方式,一种是a标签+name属性,还有一种是使用标签的Id属性。
具体如下:
a.使用a标签+name属性的方式

    <a href = "#detail">详情</a> 
    <a name = "detail"></a>

点击”详情”,跳转到<a name = "detail">的位置.

b.使用标签的id属性

    <a href = "#detail">详情</a>
    <p id = "detail"></p>

点击”详情”,跳转到<p id = "detail">的位置.

使用a+name的方式经常会出现锚点失效的情况,因此推荐使用id来绑定锚点。
言归正传,引入iframe之后,我们能否通过点击iframe中的元素来定位的相应的位置呢,这里,我们使用iframe引入head.html,这也是我最初的目的。
因此我们要实现的是:点击iframe的a标签,定位到主Html相应的位置,通过实现发现,单纯通过html是无法实现的,但是借助于JS则可以做到。

<!doctype html><html lang="en">
    <head>
    <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="Keywords" content="关键词一,关键词二">
        <meta name="Description" content="网站描述内容">
        <meta name="Author" content="Yvette Lau">
        <title>Document</title>
        <!--css js 文件的引入-->
        <style>
            #leftFrame{display:block;}
        </style>
    </head>
    <body>          
        <p><img src = "img/photo1.jpg" width="500px"/></p>      
        <iframe src="test1.html" height= "100px" name="leftFrame" scrolling="No"  noresize="noresize"  id="leftFrame"></iframe>
        <p><img src = "img/photo2.jpg"  width="500px"/></p>
        <p><img src = "img/photo3.jpg" width="500px" /></p>
        <p id = "buttom">detail</p>
    </body></html><script>
    window.onload = function(){
        var iframe = document.querySelector("#leftFrame");        var bot = iframe.contentWindow.document.querySelector("#bot");        var top = iframe.contentWindow.document.querySelector("#top");
        bot.onclick = function(){
            document.body.scrollTop = document.body.offsetHeight;
        };
        top.onclick = function(){
            document.body.scrollTop = 0;
        };
    };</script>

iframe中有id为bot和top的元素。通过JS的方式实现定位。
在主页面中,通过iframe.contentWindow能够以HTML对象来返回iframe中的文档,可以通过所以标准的DOM方法来处理被返回的对象。
在iframe页面中,通过parent定位到父html,可以通过top定位到顶层的html.
同级iframe之间调用,需要先定位到父html,再定位到iframe.
补充点关于锚点的知识,其关键作用的就是连接地址后面加的#detail(detail仅是泛指).如果当前的url为localhost:8080/index.html.那么锚点之后,url应为localhost:8080/index.html#detail
URL地址末尾带有”#”标识符,表示需要跳转到对应的位置。#idName,浏览器会在页面中找到符合”#idName”特点的标签。如果URL中”#”后面跟随的字符在文中找不到,如果是当前页面,那么不跳转,如果是从其它页面跳转过来,则显示页面顶部。
回到页面顶部,除了可以通过JS设置body的scrollTop(0返回到顶部,设置为body的高度,跳转到顶部),另一种方法就是<a href = "#">回到顶部</a>

2、借助于ajax(jquery的load方法)

另外还有一种方法,是借助于jQuery的load方法载入页面。
load(url, data, callback);url是待装入HTML网页网址;data:发送至服务器的key/value;callback:载入成功时回调函数。

 $(function(){
        $("selector1").load("page1.html");
        $("selector2").load("page2.html");
        $("selector3").load("page3.html");
    });

通过js追加进来的DOM结构,对SEO(搜索引擎优化)有影响,类似百度蜘蛛是无法抓取的!一般情况下不到万不得已的时候,不推荐使用。page1.html/page2.html/page3.html写需要的Html片段即可,因为是load进来的,也就是异步加载,在需要获取page1.html等页面的元素时,可以结合setTimeout使用,确保页面被加载进来。

3、使用HTML imports

HTML imports提供了一种在一个HTML文档中包含和重用另一个HTML文档的方法。目前谷歌已经全面支持HTML imports,Opera35版本之后支持,但是FF依旧不支持。(在谷歌的地址栏输入:chrome://flags,启动或禁止一些功能)
尽管目前HTML imports的兼容不是很好,但是我们还是有必要了解其使用方法,W3C已经发布了HTML imports的标准草案,相信后期应该还是会用得比较普遍的。使用HTML imports

<!doctype html><html lang="en">
    <head>
    <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="Keywords" content="关键词一,关键词二">
        <meta name="Description" content="网站描述内容">
        <meta name="Author" content="Yvette Lau">       
        <title>Document</title>
        <link rel = "import" href = "test1.html"/>
    </head>
    <body>
        <p id = "content"></p>
    </body></html><script>
    var post = document.querySelector("link[rel = 'import']").import;    var con = post.querySelector("p");
    document.querySelector("#content").appendChild(con.cloneNode(true));    var clone = document.importNode(con,true)
    document.querySelector("#content").appendChild(clone)</script>

给出了两种将import进来的html中我们需要的部分插入到当前html.

最后简单介绍document.querySelector和document.querySelectorAll,这两个方法是HTML5在Web API中新引入的方法,大大简化了在原生Javascript代码中选取元素。
document.querySelector和document.querySelectorAll都是接收一个字符串作为参数,这个参数需要符合CSS选择语法,即:标签、类选择器、ID选择器,属性选择器(E[type=”XX”]),结构选择器(:nth-child(n))等。不支持伪类选择器。
document.importNode(node,deep)方法把一个节点从另一个文档复制到该文档以便应用,第二个值为true,那么将该节点的所有子孙节点也复制过来。
node.cloneNode(deep):对已有的节点进行克隆,deep值为true,表示克隆其子孙节点。如果deep为false,则只克隆该节点自身。

除了以上方法外,目前更为主流的一种方式是使用组件化开发。每一部分作为一个组件。

以上就是Html中引入外部页面的方法的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:Html 方法 面的
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • Html如何设置横向导航结构_HTML/Xhtml_网页制作
  • Html+css实现纯文字和带图标的按钮_HTML/Xhtml_网页制作
  • HTML对于元素水平垂直居中的探讨_HTML/Xhtml_网页制作
  • 修改输入框placeholder文字默认颜色-webkit-input-placeholder方法_HTML/Xhtml_网页制作
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节