Html中引入外部页面的办法

发布时间：09/01 来源：未知浏览：关键词：

平常一个网站的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（搜索引擎优化）有影响，相似baidu蜘蛛是没法抓取的！一样状况下不到必不得已的时候，不引荐使用。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中引入外部页面的办法的具体内容，更多请关注百分百源码网其它相关文章！

打赏