溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家分析了Html中引入外部頁面的方法是什么的相關知識點，內容詳細易懂，操作細節合理，具有一定參考價值。如果感興趣的話，不妨跟著跟隨小編一起來看看，下面跟著小編一起深入學習“Html中引入外部頁面的方法是什么”的知識吧。
1、借助于iframe
首先，最容易想到的應該是使用iframe,雖然html5廢除了frame,但是依舊保留了iframe,我們仍可以繼續使用，iframe有一個frameboder屬性，設置屬性值為0或者為no,去除iframe的邊框。然后將scrolling設為no。這是完全可行的，不過記得要在服務器環境下運行。
varframe=document.getElementsByTageName("iframe")[0];
frame.contentWindow.document.XXX方法,
如frame.contentWindow.document.querySelector("#btn");//獲取iframe中Id為btn的節點.
因為此前沒有使用iframe來引入頭部的經驗，考慮到頭部通常除了跳轉之外，另一個作用應該是定位，在頁面較長時，通過點擊，準確定位到某處。頁面的跳轉，使用iframe引入并無影響，那么錨點呢？這個需要試一試才知道。
在此，再補充一點關于錨點的知識：
錨點可以跳轉到當前頁面的相應位置，還可以跳轉到其它頁面的相應位置。
實現錨點有兩種方式，一種是a標簽+name屬性，還有一種是使用標簽的Id屬性。
具體如下：
a.使用a標簽+name屬性的方式
<ahref="#detail">詳情</a>
<aname="detail"></a>
點擊”詳情”，跳轉到<aname="detail">的位置.
b.使用標簽的id屬性
<ahref="#detail">詳情</a>
<pid="detail"></p>
點擊”詳情”，跳轉到<pid="detail">的位置.
使用a+name的方式經常會出現錨點失效的情況，因此推薦使用id來綁定錨點。
言歸正傳，引入iframe之后，我們能否通過點擊iframe中的元素來定位的相應的位置呢，這里，我們使用iframe引入head.html，這也是我最初的目的。
因此我們要實現的是:點擊iframe的a標簽，定位到主Html相應的位置,通過實現發現，單純通過html是無法實現的，但是借助于JS則可以做到。
<!doctypehtml><htmllang="en">
<head>
<!--網站編碼格式，UTF-8國際編碼，GBK或gb2312中文編碼-->
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="關鍵詞一，關鍵詞二">
<metaname="Description"content="網站描述內容">
<metaname="Author"content="YvetteLau">
<title>Document</title>
<!--cssjs文件的引入-->
<style>
#leftFrame{display:block;}
</style>
</head>
<body>
<p><imgsrc="img/photo1.jpg"width="500px"/></p>
<iframesrc="test1.html"height="100px"name="leftFrame"scrolling="No"noresize="noresize"id="leftFrame"></iframe>
<p><imgsrc="img/photo2.jpg"width="500px"/></p>
<p><imgsrc="img/photo3.jpg"width="500px"/></p>
<pid="buttom">detail</p>
</body></html><script>
window.onload=function(){
variframe=document.querySelector("#leftFrame");varbot=iframe.contentWindow.document.querySelector("#bot");vartop=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的方式實現定位。
在主頁面中，通過iframe.contentWindow能夠以HTML對象來返回iframe中的文檔，可以通過所以標準的DOM方法來處理被返回的對象。
在iframe頁面中，通過parent定位到父html,可以通過top定位到頂層的html.
同級iframe之間調用，需要先定位到父html，再定位到iframe.
補充點關于錨點的知識，其關鍵作用的就是連接地址后面加的#detail(detail僅是泛指).如果當前的url為localhost:8080/index.html.那么錨點之后，url應為localhost:8080/index.html#detail
URL地址末尾帶有”#”標識符，表示需要跳轉到對應的位置。#idName,瀏覽器會在頁面中找到符合”#idName”特點的標簽。如果URL中”#”后面跟隨的字符在文中找不到，如果是當前頁面，那么不跳轉，如果是從其它頁面跳轉過來，則顯示頁面頂部。
回到頁面頂部，除了可以通過JS設置body的scrollTop(0返回到頂部,設置為body的高度,跳轉到頂部),另一種方法就是<ahref="#">回到頂部</a>
2、借助于ajax(jquery的load方法)
另外還有一種方法，是借助于jQuery的load方法載入頁面。
load(url,data,callback);url是待裝入HTML網頁網址;data:發送至服務器的key/value;callback:載入成功時回調函數。
$(function(){
$("selector1").load("page1.html");
$("selector2").load("page2.html");
$("selector3").load("page3.html");
});通過js追加進來的DOM結構，對SEO（搜索引擎優化）有影響，類似百度蜘蛛是無法抓取的！一般情況下不到萬不得已的時候，不推薦使用。page1.html/page2.html/page3.html寫需要的Html片段即可，因為是load進來的，也就是異步加載，在需要獲取page1.html等頁面的元素時，可以結合setTimeout使用，確保頁面被加載進來。
3、使用HTMLimports
HTMLimports提供了一種在一個HTML文檔中包含和重用另一個HTML文檔的方法。目前谷歌已經全面支持HTMLimports，Opera35版本之后支持，但是FF依舊不支持。(在谷歌的地址欄輸入:chrome://flags,啟動或禁止一些功能)
盡管目前HTMLimports的兼容不是很好，但是我們還是有必要了解其使用方法，W3C已經發布了HTMLimports的標準草案，相信后期應該還是會用得比較普遍的。使用HTMLimports
<!doctypehtml><htmllang="en">
<head>
<!--網站編碼格式，UTF-8國際編碼，GBK或gb2312中文編碼-->
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="關鍵詞一，關鍵詞二">
<metaname="Description"content="網站描述內容">
<metaname="Author"content="YvetteLau">
<title>Document</title>
<linkrel="import"href="test1.html"/>
</head>
<body>
<pid="content"></p>
</body></html><script>
varpost=document.querySelector("link[rel='import']").import;varcon=post.querySelector("p");
document.querySelector("#content").appendChild(con.cloneNode(true));varclone=document.importNode(con,true)
document.querySelector("#content").appendChild(clone)</script>給出了兩種將import進來的html中我們需要的部分插入到當前html.
最后簡單介紹document.querySelector和document.querySelectorAll，這兩個方法是HTML5在WebAPI中新引入的方法，大大簡化了在原生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，則只克隆該節點自身。
除了以上方法外，目前更為主流的一種方式是使用組件化開發。每一部分作為一個組件。
1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。 3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網盛行的一個原因。 4、通用性：HTML是網絡的通用語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
關于“Html中引入外部頁面的方法是什么”就介紹到這了,更多相關內容可以搜索億速云以前的文章，希望能夠幫助大家答疑解惑，請多多支持億速云網站！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
