使用iframe標簽法在HTML中引入外部頁面-創(chuàng)新互聯

這篇文章主要介紹了使用iframe標簽法在HTML中引入外部頁面，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯公司專業(yè)為企業(yè)提供侯馬網站建設、侯馬做網站、侯馬網站設計、侯馬網站制作等企業(yè)網站建設、網頁設計與制作、侯馬企業(yè)網站模板建站服務，10余年侯馬做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

首先，最容易想到的應該是使用iframe,雖然html5廢除了frame,但是依舊保留了iframe,我們仍可以繼續(xù)使用，iframe有一個frameboder屬性，設置屬性值為0或者為no,去除iframe的邊框。然后將scrolling設為no。這是完全可行的，不過記得要在服務器環(huán)境下運行。

var frame = document.getElementsByTageName("iframe")[0];
    frame.contentWindow.document.XXX方法,
    如frame.contentWindow.document.querySelector("#btn");//獲取iframe中Id為btn的節(jié)點.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相應的位置,通過實現發(fā)現，單純通過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>。

感謝你能夠認真閱讀完這篇文章，希望小編分享使用iframe標簽法在HTML中引入外部頁面內容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯建站，關注創(chuàng)新互聯網站制作公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯建站，詳細的解決方法等著你來學習!

分享名稱：使用iframe標簽法在HTML中引入外部頁面-創(chuàng)新互聯
本文路徑：http://jinyejixie.com/article10/dedddo.html

成都網站建設公司_創(chuàng)新互聯，為您提供云服務器、ChatGPT、定制網站、動態(tài)網站、全網營銷推廣、建站公司

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

使用iframe標簽法在HTML中引入外部頁面-創(chuàng)新互聯