如何在HTML中引入外部頁面（iframe標籤法）-html教學-PHP中文網

首頁

web前端

html教學

如何在HTML中引入外部頁面（iframe標籤法）

yulia

Sep 25, 2018 pm 04:29 PM

htmliframe

在頁面佈局時，會將部分外部頁面引入到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

點擊」詳情”，跳到的位置.

b.使用標籤的id屬性

<a href = "#detail">详情</a>
<div id = "detail"></div>12

點擊”詳情”，跳到

的位置.

使用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="/static/imghwm/default1.png"  data-src="test1.html"  class="lazy"  src = "img/photo1.jpg"    style="max-width:90%"/ alt="如何在HTML中引入外部頁面（iframe標籤法）" ></div>      
        <iframe  height= "100px" name="leftFrame" scrolling="No"  noresize="noresize"  id="leftFrame"></iframe>
        <div><img  src = "img/photo2.jpg"     style="max-width:90%"/ alt="如何在HTML中引入外部頁面（iframe標籤法）" ></div>
        <div><img  src = "img/photo3.jpg"    style="max-width:90%" / alt="如何在HTML中引入外部頁面（iframe標籤法）" ></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的高度,跳到頂部),另一種方法就是回到頂部。

以上是如何在HTML中引入外部頁面（iframe標籤法）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn