Html中引入外部頁面的方法-html教學-PHP中文網

通常一個網站的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 = &#39;import&#39;]").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中文網其他相關文章！