HTML imports提供了一種在一個(gè)HTML文檔中包含和重用另一個(gè)HTML文檔的方法。目前谷歌已經(jīng)全面支持HTML imports，Opera35版本之后支持，但是FF依舊不支持。(在谷歌的地址欄輸入:chrome://flags,啟動(dòng)或禁止一些功能) 。盡管目前HTML imports的兼容不是很好，但是我們還是有必要了解其使用方法，W3C已經(jīng)發(fā)布了HTML imports的標(biāo)準(zhǔn)草案，相信后期應(yīng)該還是會(huì)用得比較普遍的。使用HTML imports

 !doctype html  html  head  !--網(wǎng)站編碼格式，UTF-8 國際編碼，GBK或 gb2312 中文編碼--  meta http-equiv= content-type content= text/html;charset=utf-8 /  meta name= Keywords content= 關(guān)鍵詞一，關(guān)鍵詞二  meta name= Description content= 網(wǎng)站描述內(nèi)容  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進(jìn)來的html中我們需要的部分插入到當(dāng)前html.

最后簡單介紹document.querySelector和document.querySelectorAll，這兩個(gè)方法是HTML5在Web API中新引入的方法，大大簡化了在原生Javascript代碼中選取元素。

document.querySelector和document.querySelectorAll都是接收一個(gè)字符串作為參數(shù)，這個(gè)參數(shù)需要符合CSS選擇語法，即:標(biāo)簽、類選擇器、ID選擇器，屬性選擇器(E[type=”XX”]),結(jié)構(gòu)選擇器(:nth-child(n))等。不支持偽類選擇器。

document.importNode(node,deep)方法把一個(gè)節(jié)點(diǎn)從另一個(gè)文檔復(fù)制到該文檔以便應(yīng)用，第二個(gè)值為true，那么將該節(jié)點(diǎn)的所有子孫節(jié)點(diǎn)也復(fù)制過來。

node.cloneNode(deep):對已有的節(jié)點(diǎn)進(jìn)行克隆,deep值為true，表示克隆其子孫節(jié)點(diǎn)。如果deep為false，則只克隆該節(jié)點(diǎn)自身。

以上就是如何在HTML中引入外部頁面（HTML imports法） 的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。