溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹在HTML中引入外部頁面的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
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中引入外部頁面的方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
