如何在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法） 的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。