明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

如何在HTML中引入外部頁面（iframe標(biāo)簽法）

發(fā)表時間：2023-08-31 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]在頁面布局時，會將部分外部頁面引入到HTML中，這篇文章就和大家講講如何在HTML中引入外部頁面之iframe標(biāo)簽法。有需要的朋友可以參考一下，希望對你有用。首先，最容易想到的應(yīng)該是使用iframe,雖然html5廢除了frame,但是依舊保留了iframe,我們?nèi)钥梢岳^續(xù)使用，iframe有一個...
在頁面布局時，會將部分外部頁面引入到HTML中，這篇文章就和大家講講如何在HTML中引入外部頁面之iframe標(biāo)簽法。有需要的朋友可以參考一下，希望對你有用。

首先，最容易想到的應(yīng)該是使用iframe,雖然html5廢除了frame,但是依舊保留了iframe,我們?nèi)钥梢岳^續(xù)使用，iframe有一個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).123

因?yàn)榇饲皼]有使用iframe來引入頭部的經(jīng)驗(yàn)，考慮到頭部通常除了跳轉(zhuǎn)之外，另一個作用應(yīng)該是定位，在頁面較長時，通過點(diǎn)擊，準(zhǔn)確定位到某處。頁面的跳轉(zhuǎn)，使用iframe引入并無影響，那么錨點(diǎn)呢？這個需要試一試才知道。

在此，再補(bǔ)充一點(diǎn)關(guān)于錨點(diǎn)的知識：

錨點(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>12

點(diǎn)擊”詳情”，跳轉(zhuǎn)到<a name = "detail">的位置.

b.使用標(biāo)簽的id屬性

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

點(diǎn)擊”詳情”，跳轉(zhuǎn)到<div id = "detail">的位置.

使用a+name的方式經(jīng)常會出現(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>
    <head>
    <!--網(wǎng)站編碼格式，UTF-8 國際編碼，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>          
        <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的方式實(shí)現(xiàn)定位。

在主頁面中，通過iframe.contentWindow能夠以HTML對象來返回iframe中的文檔，可以通過所以標(biāo)準(zhǔn)的DOM方法來處理被返回的對象。

在iframe頁面中，通過parent定位到父html,可以通過top定位到頂層的html.

同級iframe之間調(diào)用，需要先定位到父html，再定位到iframe.

補(bǔ)充點(diǎn)關(guān)于錨點(diǎn)的知識，其關(guān)鍵作用的就是連接地址后面加的#detail(detail僅是泛指).如果當(dāng)前的url為localhost:8080/index.html.那么錨點(diǎn)之后，url應(yīng)為localhost:8080/index.html#detail

URL地址末尾帶有”#”標(biāo)識符，表示需要跳轉(zhuǎn)到對應(yīng)的位置。#idName,瀏覽器會在頁面中找到符合”#idName”特點(diǎn)的標(biāo)簽。如果URL中”#”后面跟隨的字符在文中找不到，如果是當(dāng)前頁面，那么不跳轉(zhuǎn)，如果是從其它頁面跳轉(zhuǎn)過來，則顯示頁面頂部。

回到頁面頂部，除了可以通過JS設(shè)置body的scrollTop(0返回到頂部,設(shè)置為body的高度,跳轉(zhuǎn)到頂部),另一種方法就是<a href = "#">回到頂部</a>。

以上就是如何在HTML中引入外部頁面（iframe標(biāo)簽法）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。