Html中引入外部頁面的方法
發(fā)表時(shí)間：2023-09-12 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]通常一個(gè)網(wǎng)站的head,foot,rightBar(右側(cè)的條目)都是相同的，這部分內(nèi)容可以通過引入的方式，否則一旦需要修改，就需要修改十個(gè)，二十個(gè)，乃至更多的頁面，是一項(xiàng)既繁瑣但又毫無意義的工作。借助于PHP或者JSP，使用include能夠輕松解決此問題，但是如果脫離后端語言，從前端的角度，能不...
通常一個(gè)網(wǎng)站的head,foot,rightBar(右側(cè)的條目)都是相同的，這部分內(nèi)容可以通過引入的方式，否則一旦需要修改，就需要修改十個(gè)，二十個(gè)，乃至更多的頁面，是一項(xiàng)既繁瑣但又毫無意義的工作。借助于PHP或者JSP，使用include能夠輕松解決此問題，但是如果脫離后端語言，從前端的角度，能不能解決這個(gè)問題呢？
1、借助于iframe
首先，最容易想到的應(yīng)該是使用iframe,雖然html5廢除了frame,但是依舊保留了iframe,我們?nèi)钥梢岳^續(xù)使用，iframe有一個(gè)frameboder屬性，設(shè)置屬性值為0或者為no,去除iframe的邊框。然后將scrolling設(shè)為no。這是完全可行的，不過記得要在服務(wù)器環(huán)境下運(yùn)行。
var frame = document.getElementsByTageName("iframe")[0];
frame.contentWindow.document.XXX方法,
如frame.contentWindow.document.querySelector("#btn");//獲取iframe中Id為btn的節(jié)點(diǎn).因?yàn)榇饲皼]有使用iframe來引入頭部的經(jīng)驗(yàn)，考慮到頭部通常除了跳轉(zhuǎn)之外，另一個(gè)作用應(yīng)該是定位，在頁面較長(zhǎng)時(shí)，通過點(diǎn)擊，準(zhǔn)確定位到某處。頁面的跳轉(zhuǎn)，使用iframe引入并無影響，那么錨點(diǎn)呢？這個(gè)需要試一試才知道。
在此，再補(bǔ)充一點(diǎn)關(guān)于錨點(diǎn)的知識(shí)：
錨點(diǎn)可以跳轉(zhuǎn)到當(dāng)前頁面的相應(yīng)位置，還可以跳轉(zhuǎn)到其它頁面的相應(yīng)位置。
實(shí)現(xiàn)錨點(diǎn)有兩種方式，一種是a標(biāo)簽+name屬性，還有一種是使用標(biāo)簽的Id屬性。
具體如下：
a.使用a標(biāo)簽+name屬性的方式
<a href = "#detail">詳情</a>
<a name = "detail"></a>點(diǎn)擊”詳情”，跳轉(zhuǎn)到<a name = "detail">的位置.
b.使用標(biāo)簽的id屬性
<a href = "#detail">詳情</a>
<p id = "detail"></p>點(diǎn)擊”詳情”，跳轉(zhuǎn)到<p id = "detail">的位置.
使用a+name的方式經(jīng)常會(huì)出現(xiàn)錨點(diǎn)失效的情況，因此推薦使用id來綁定錨點(diǎn)。
言歸正傳，引入iframe之后，我們能否通過點(diǎn)擊iframe中的元素來定位的相應(yīng)的位置呢，這里，我們使用iframe引入head.html，這也是我最初的目的。
因此我們要實(shí)現(xiàn)的是:點(diǎn)擊iframe的a標(biāo)簽，定位到主Html相應(yīng)的位置,通過實(shí)現(xiàn)發(fā)現(xiàn)，單純通過html是無法實(shí)現(xiàn)的，但是借助于JS則可以做到。
<!doctype html><html lang="en">
<head>
<!--網(wǎng)站編碼格式，UTF-8 國(guó)際編碼，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>
<!--css js 文件的引入-->
<style>
#leftFrame{display:block;}
</style>
</head>
<body>
<p><img src = "img/photo1.jpg" width="500px"/></p>
<iframe src="test1.html" height= "100px" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"></iframe>
<p><img src = "img/photo2.jpg" width="500px"/></p>
<p><img src = "img/photo3.jpg" width="500px" /></p>
<p id = "buttom">detail</p>
</body></html><script>
window.onload = function(){
var iframe = document.querySelector("#leftFrame"); var bot = iframe.contentWindow.document.querySelector("#bot"); var top = iframe.contentWindow.document.querySelector("#top");
bot.onclick = function(){
document.body.scrollTop = document.body.offsetHeight;
};
top.onclick = function(){
document.body.scrollTop = 0;
};
};</script>iframe中有id為bot和top的元素。通過JS的方式實(shí)現(xiàn)定位。
在主頁面中，通過iframe.contentWindow能夠以HTML對(duì)象來返回iframe中的文檔，可以通過所以標(biāo)準(zhǔn)的DOM方法來處理被返回的對(duì)象。
在iframe頁面中，通過parent定位到父html,可以通過top定位到頂層的html.
同級(jí)iframe之間調(diào)用，需要先定位到父html，再定位到iframe.
補(bǔ)充點(diǎn)關(guān)于錨點(diǎn)的知識(shí)，其關(guān)鍵作用的就是連接地址后面加的#detail(detail僅是泛指).如果當(dāng)前的url為localhost:8080/index.html.那么錨點(diǎn)之后，url應(yīng)為localhost:8080/index.html#detail
URL地址末尾帶有”#”標(biāo)識(shí)符，表示需要跳轉(zhuǎn)到對(duì)應(yīng)的位置。#idName,瀏覽器會(huì)在頁面中找到符合”#idName”特點(diǎn)的標(biāo)簽。如果URL中”#”后面跟隨的字符在文中找不到，如果是當(dāng)前頁面，那么不跳轉(zhuǎn)，如果是從其它頁面跳轉(zhuǎn)過來，則顯示頁面頂部。
回到頁面頂部，除了可以通過JS設(shè)置body的scrollTop(0返回到頂部,設(shè)置為body的高度,跳轉(zhuǎn)到頂部),另一種方法就是<a href = "#">回到頂部</a>
2、借助于ajax(jquery的load方法)
另外還有一種方法，是借助于jQuery的load方法載入頁面。
load(url, data, callback);url是待裝入HTML網(wǎng)頁網(wǎng)址;data:發(fā)送至服務(wù)器的key/value;callback:載入成功時(shí)回調(diào)函數(shù)。
$(function(){
$("selector1").load("page1.html");
$("selector2").load("page2.html");
$("selector3").load("page3.html");
});通過js追加進(jìn)來的DOM結(jié)構(gòu)，對(duì)SEO（搜索引擎優(yōu)化）有影響，類似百度蜘蛛是無法抓取的！一般情況下不到萬不得已的時(shí)候，不推薦使用。page1.html/page2.html/page3.html寫需要的Html片段即可，因?yàn)槭莑oad進(jìn)來的，也就是異步加載，在需要獲取page1.html等頁面的元素時(shí)，可以結(jié)合setTimeout使用，確保頁面被加載進(jìn)來。
3、使用HTML imports
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 lang="en">
<head>
<!--網(wǎng)站編碼格式，UTF-8 國(guó)際編碼，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>
<p id = "content"></p>
</body></html><script>
var post = document.querySelector("link[rel = 'import']").import; var con = post.querySelector("p");
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.
最后簡(jiǎn)單介紹document.querySelector和document.querySelectorAll，這兩個(gè)方法是HTML5在Web API中新引入的方法，大大簡(jiǎn)化了在原生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):對(duì)已有的節(jié)點(diǎn)進(jìn)行克隆,deep值為true，表示克隆其子孫節(jié)點(diǎn)。如果deep為false，則只克隆該節(jié)點(diǎn)自身。
除了以上方法外，目前更為主流的一種方式是使用組件化開發(fā)。每一部分作為一個(gè)組件。
以上就是Html中引入外部頁面的方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
