明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

如何在HTML中引入外部頁面（HTML imports法） 

發(fā)表時間：2023-08-31 來源：明輝站整理相關軟件相關文章人氣：

[摘要]在頁面布局時，會將部分外部頁面引入到HTML中，這篇文章就和大家講講如何在HTML中引入外部頁面之HTML imports法。有需要的朋友可以參考一下，希望對你有用。HTML imports提供了一種在一個HTML文檔中包含和重用另一個HTML文檔的方法。目前谷歌已經全面支持HTML import...
在頁面布局時，會將部分外部頁面引入到HTML中，這篇文章就和大家講講如何在HTML中引入外部頁面之HTML imports法。有需要的朋友可以參考一下，希望對你有用。

HTML imports提供了一種在一個HTML文檔中包含和重用另一個HTML文檔的方法。目前谷歌已經全面支持HTML imports，Opera35版本之后支持，但是FF依舊不支持。(在谷歌的地址欄輸入:chrome://flags,啟動或禁止一些功能) 。盡管目前HTML imports的兼容不是很好，但是我們還是有必要了解其使用方法，W3C已經發(fā)布了HTML imports的標準草案，相信后期應該還是會用得比較普遍的。使用HTML imports 

<!doctype html>
<html>
    <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>
        <div id = "content"></div>
    </body>
</html>
<script>
    var post = document.querySelector("link[rel = 'import']").import;
    var con = post.querySelector("div");
    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都是接收一個字符串作為參數(shù)，這個參數(shù)需要符合CSS選擇語法，即:標簽、類選擇器、ID選擇器，屬性選擇器(E[type=”XX”]),結構選擇器(:nth-child(n))等。不支持偽類選擇器。

document.importNode(node,deep)方法把一個節(jié)點從另一個文檔復制到該文檔以便應用，第二個值為true，那么將該節(jié)點的所有子孫節(jié)點也復制過來。

node.cloneNode(deep):對已有的節(jié)點進行克隆,deep值為true，表示克隆其子孫節(jié)點。如果deep為false，則只克隆該節(jié)點自身。

以上就是如何在HTML中引入外部頁面（HTML imports法） 的詳細內容，更多請關注php中文網其它相關文章！


網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。