首先，最容易想到的應該是使用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

點擊”詳情”，跳轉到 a name = detail 的位置.

b.使用標簽的id屬性

 a href = #detail 詳情 /a  div id = detail /div 12

點擊”詳情”，跳轉到 div id = detail 的位置.

使用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的高度,跳轉到頂部),另一種方法就是 a href = # 回到頂部 /a 。

以上就是如何在HTML中引入外部頁面（iframe標簽法）的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。