如何在HTML中引入外部页面（HTML imports法） �c-木庄网络博客

本文摘自PHP中文网，作者yulia，侵删。

在页面布局时，会将部分外部页面引入到HTML中，这篇文章就和大家讲讲如何在HTML中引入外部页面之HTML imports法。有需要的朋友可以参考一下，希望对你有用。

HTML imports提供了一种在一个HTML文档中包含和重用另一个HTML文档的方法。目前谷歌已经全面支持HTML imports，Opera35版本之后支持，但是FF依旧不支持。(在谷歌的地址栏输入: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 = '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>