在页面布局时，会将部分外部页面引入到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法） 的详细内容。