首頁 > 文章 > web前端 > 如何在HTML中引入外部頁面（HTML imports法） 

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

yulia原創: 2018-09-25 16:42:5812668瀏覽

在頁面佈局時，會將部分外部頁面引入到HTML中，這篇文章就和大家講講如何在HTML中引入外部頁面之HTML imports法。有需要的朋友可以參考一下，希望對你有用。

HTML imports提供了一種在一個HTML文件中包含和重複使用另一個HTML文件的方法。目前Google已經全面支援HTML imports，Opera35版本之後支持，但FF依舊不支援。 (在Google的網址列輸入:chrome://flags,啟動或禁止一些功能) 。儘管目前HTML imports的兼容不是很好，但是我們還是有必要了解其使用方法，W3C已經發布了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 = &#39;import&#39;]").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都是接收一個字串作為參數，這個參數需要符合CSS選擇語法，即:標籤、類別選擇器、ID選擇器，屬性選擇器(E[type= ”XX”]),結構選擇器(:nth-child(n))等。不支援偽類選擇器。

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

node.cloneNode(deep):對現有的節點進行複製,deep值為true，表示複製其子孫節點。如果deep為false，則只複製該節點本身。

以上是如何在HTML中引入外部頁面（HTML imports法） 的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html5 css chrome html 字符串选择器伪类

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何在HTML中引入外部頁面（iframe標籤法）下一篇：如何在HTML中引入外部頁面（iframe標籤法）

看更多