如何在HTML中引入外部頁面（iframe標籤法）
- yulia原創
- 2018-09-25 16:29:323805瀏覽
在頁面佈局時，會將部分外部頁面引入到HTML中，這篇文章就和大家講講如何在HTML中引入外部頁面之iframe標籤法。有需要的朋友可以參考一下，希望對你有用。
首先，最容易想到的應該是使用iframe,雖然html5廢除了frame,但是依舊保留了iframe,我們仍可以繼續使用，iframe有一個frameboder屬性，設置屬性值為0或者為no,去除iframe的邊框。然後將scrolling設為no。這是完全可行的，不過記得要在伺服器環境下運作。
var frame = document.getElementsByTageName("iframe")[0];
frame.contentWindow.document.XXX方法,
如frame.contentWindow.document.querySelector("#btn");//获取iframe中Id为btn的节点.123因為先前沒有使用iframe來引入頭部的經驗，考慮到頭部通常除了跳轉之外，另一個作用應該是定位，在頁面較長時，透過點擊，準確定位到某處。頁面的跳轉，使用iframe引入並無影響，那麼錨點呢？這個需要試試看才知道。
在此，再補充一點關於錨點的知識：
錨點可以跳到目前頁面的對應位置，也可以跳到其它頁面的對應位置。
實作錨點有兩種方式，一種是a標籤 name屬性，還有一種是使用標籤的Id屬性。
具體如下：
a.使用a標籤name屬性的方式
<a href = "#detail">详情</a> <a name = "detail"></a>12
點擊」詳情”，跳到d39f3d78f2b78439de57b855cdb22445的位置.
b.使用標籤的id屬性
<a href = "#detail">详情</a> <div id = "detail"></div>12
點擊”詳情”，跳到700814910a0bb0f3fa58e1f941cbe817的位置.
使用a name的方式經常會出現錨點失效的情況，因此建議使用id來綁定錨點。
言歸正傳，引入iframe之後，我們能否透過點擊iframe中的元素來定位的對應的位置呢，這裡，我們使用iframe引入head.html，這也是我最初的目的。
因此我們要實現的是:點選iframe的a標籤，定位到主Html對應的位置,透過實作發現，單純透過html是無法實現的，但是藉助於JS則可以做到。
<!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>
<!--css js 文件的引入-->
<style>
#leftFrame{display:block;}
</style>
</head>
<body>
<div><img src = "img/photo1.jpg" width="500px"/></div>
<iframe src="test1.html" height= "100px" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"></iframe>
<div><img src = "img/photo2.jpg" width="500px"/></div>
<div><img src = "img/photo3.jpg" width="500px" /></div>
<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的方式實現定位。
在主頁中，透過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的高度,跳到頂部),另一種方法就是fdb1f4b5d831a8c25a3f2f6fa4c446f8回到頂部5db79b134e9f6b82c0b36e0489ee08ed。
以上是如何在HTML中引入外部頁面（iframe標籤法）的詳細內容。更多資訊請關注PHP中文網其他相關文章！