怎样在HTML中引入外部页面（HTML imports法） ?-百分百源码网

怎样在HTML中引入外部页面（HTML imports法） ?

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

在页面规划时，会将部格外部页面引入到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>

给出了两种将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法） ?的具体内容，更多请关注百分百源码网其它相关文章！

打赏