古老的框架 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　框架<frame>已經被廢棄，而內嵌框架<iframe>依然在使用。通過使用框架，可以在同一個窗口顯示不止一個頁面。每份HTML文檔稱為一個框架，并且每個框架都獨立于其他的框架

<frameset>

　　框架結構標簽(也稱為框架集)定義如何將窗口分割成框架，每個frameset定義了一系列行或列

　　　　[注意]不能將<body>標簽與<frameset>標簽同時使用

【屬性】

　　cols 定義框架集列的數目和尺寸

　　rows 定義框架集行的數目和尺寸

<frameset rows="150,300,150">
<frameset rows="25%,50%,25%">
<frameset cols="100, *">
<frameset rows="*, 100, *">
<frameset cols="10%, 3*, *, *">

<frame>

　　框架標簽定義了放置在每個框架中的HTML文檔

【屬性】

　　src 規定在框架中顯示的文檔的URL

　　name 規定框架的名稱，用于在javascript中引用元素或作為鏈接的目標

　　noresize 指定用戶無法調整框架大小

　　longdesc 指向帶有框架內容長描述的頁面

　　scroll

scroll="auto"//默認，需要時顯示滾動條
scroll="yes"//始終顯示滾動條
scroll="no"//從不顯示滾動條

　　frameborder

frameborder="0"//無邊框
frameborder="1"//(默認，有邊框)

<frame src="frame_a.htm" frameborder="0" name="frame1" scrolling="yes"  noresize="noresize"  longdesc="w3school.txt" />

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

<frameset rows="50%,50%">
    <frame src="/example/html/frame_a.html">
    <frameset cols="25%,75%">
        <frame src="/example/html/frame_b.html">
        <frame src="/example/html/frame_c.html">
    </frameset>
</frameset>

<iframe>

　　內聯框架用于在網頁中顯示網頁。iframe標簽可以很方便地創建框架，但由于創建一個框架意味著要創建一個完整的頁面環境，很耗費資源；因此能不用就盡量不用

【屬性】

　　src 規定在內聯框架中顯示的文檔的URL

　　name 規定內聯框架的名稱，用于在javascript中引用元素或作為鏈接的目標

　　height 規定iframe的高度

　　width 規定iframe的寬度

　　longdesc 指向帶有內聯框架內容長描述的頁面(已廢棄)

　　frameborder(已廢棄)

frameborder="0"//無邊框
frameborder="1"//(默認，有邊框)

　　scrolling(已廢棄)

scrolling="auto"//默認，需要時顯示滾動條
scrolling="yes"//始終顯示滾動條
scrolling="no"//從不顯示滾動條

　　seamless 規定iframe看上去像是包含文檔的一部分，設置該屬性后，iframe無邊框或滾動條

　　sandbox 啟用對<iframe>中內容的限制，可以用空格分隔多個屬性值(IE9-不支持)

sandbox=""//應用所有的限制
sandbox="allow-same-origin"//允許iframe內容被視為與包含文檔有相同的來源
sandbox="allow-top-navigation"//允許iframe內容從包含文檔導航加載內容
sandbox="allow-forms"//允許表單提交
sandbox="allow-scripts"//允許腳本執行

　　srcdoc 規定在iframe中顯示的頁面的HTML內容(IE瀏覽器不支持)，若瀏覽器支持srcdoc屬性，則將顯示srcdoc屬性的內容；否則將顯示src屬性中規定的文件

<iframe srcdoc="<p>Hello world!</p>" src="/demo/demo_iframe_srcdoc.html">
</iframe>

target屬性

　　要了解框架之間的關系，就必須了解target屬性

　　target屬性表示鏈接打開方式

　　1、_self 當前窗口（默認）
2、_blank 新窗口
3、_parent 父框架集
4、_top 整個窗口
5、_framename 指定框架

//外層框架
<frameset cols = "20%, *">
    <frame src="left.html">
    <frame src="right.html">
</frameset>

//里層框架
<frameset rows = "50%,*">
    <frame src="top.html">
    <frame src="bottom.html" name="bottom">        
</frameset>

//錨點頁
<ul class="list">
    <li class="in"><a href="chap1.html" target="_self">chap1(_self)</a></li>
    <li class="in"><a href="chap2.html" target="_blank">chap2(_blank)</a></li>
    <li class="in"><a href="chap3.html" target="_parent">chap3(_parent)</a></li>
    <li class="in"><a href="chap4.html" target="_top">chap4(_top)</a></li>    
    <li class="in"><a href="chap5.html" target="bottom">chap5(framename)</a></li>
</ul>

框架腳本

　　如果頁面中包含框架，則每個框架都擁有自己的window對象，并且保存在frames集合中。在frames集合中，可以通過數值索引(從0開始，從左至右，從上到下)或者框架名稱來訪問相應的window對象。每個window對象都有一個name屬性，其中包含框架的名稱

<frameset rows = "40%,*">
    <frame src="https://www.hao123.com/" name="topFrame">
    <frameset cols = "50%,50%">
        <frame src="http://www.baidu.com" name="leftFrame">
        <frame src="http://www.kongzhong.com/" name="rightFrame">
    </frameset>
</frameset>

　　top對象始終指向最高(最外)層的框架，也就是瀏覽器窗口。使用它可以確保在一個框架中正確地訪問另一個框架。因為對于在一個框架中編寫的任何代碼來說，其中的window對象指向的都是那個框架的特定實例，而非最髙層的框架。下圖展示了在最髙層窗口中，通過代碼來訪問前面例子中每個框架的不同方式

　　與top相對的另一個window對象是parent。顧名思義，parent(父)對象始終指向當前框架的直接上層框架。在某些情況下，parent有可能等于top。但在沒有框架的情況下，parent一定等于top(此時它們都等于window)

<frameset rows = "40%,*">
    <frame src="top.html" name="topFrame">
    <frameset cols = "50%,50%">
        <frame src="left.html" name="leftFrame">
        <frame src="right.html" name="rightFrame">
    </frameset>
</frameset>

<!-- right.html-->
<frameset cols = "50%,50%">
    <frame src="red.html" name="redFrame">
    <frame src="blue.html" name="blueFrame">
</frameset>
</head>

　　瀏覽器在加載完第一個框架集以后，會繼續將第二個框架集加載到rightFrame中。如果代碼位于redFrame(或blueFrame)中，那么parent對象指向的就是rightFrame。可是，如果代碼位于topFrame中，則parent指向的是top，因為topFrame的直接上層框架就是最外層框架

　　[注意]除非最高層窗口是通過window.open()打開的，否則其window對象的name屬性不會包含任何值

　　與框架有關的最后一個對象是self，它始終指向window。實際上，self和window對象可以互換使用。引入self對象的目的只是為了與top和parent對象對應起來，因此它不格外包含其他值

　　所有這些對象都是window對象的屬性，可以通過window.parent、window.top等形式來訪問。同時，這也意味著可以將不同層次的window對象連綴起來，例如window.parent.parent.frames[0]

　　在使用框架的情況下，瀏覽器中會存在多個Global對象。在每個框架中定義的全局變量會自動成為框架中window對象的屬性。由于每個window對象都包含原生類型的構造函數，因此每個框架都有一套自己的構造函數，這些構造函數一一對應，但并不相等。例如，top.Object并不等于top.frames[0].Object。這個問題會影響到對跨框架傳遞的對象使用instanceof操作符。最典型的影響就是數組的類型檢測

iframe腳本

　　通過getElementsById()等方法獲得的是iframe的DOM節點，而并非iframe的window。使用contextWindow屬性可以獲得iframe節點的包含的window對象，或者使用contentDocument屬性獲得包含的document對象

　　[注意]IE7-瀏覽器不支持contentDocument屬性

　　如果使用frames[序號]或者frames[name]獲得的就是iframe的Window對象

<iframe id = "frameID" name="frameName" src="top.html"></iframe>
<script>
var frameID = document.getElementById('frameID');
var frameWindow = frameID.contentWindow;
var frameDocument = frameID.contentDocument;
//<iframe> window document
console.log(frameID,frameWindow,frameDocument);

//window window
console.log(frames[0],frames.frameName);
</script>

　　iframe元素遵守同源政策，只有當父頁面與框架頁面來自同一個域名，兩者之間才可以用腳本通信

　　iframe窗口內部，使用window.parent引用父窗口。如果當前頁面沒有父窗口，則window.parent屬性返回自身。因此，可以通過window.parent是否等于window.self，判斷當前窗口是否為iframe窗口

if (window.parent !== window.self) {
  // 當前窗口是子窗口
}

　　iframe嵌入窗口的window對象，有一個frameElement屬性，返回它在父窗口中的DOM節點。對于那么非嵌入的窗口，該屬性等于null

<!-- 父網頁-->
<iframe id = "frameID" name="frameName" src="top.html"></iframe>
<script>
var num = 10;
</script>

<!-- 子網頁 -->
<script>
var num = 5;
console.log(window.parent.num,window.top.num,window.self.num);//10 10 5
console.log(window.frameElement);//<iframe>
</script>

　　window對象的frames屬性返回一個類似數組的對象，成員是所有子窗口的window對象。可以使用這個屬性，實現窗口之間的互相引用。比如，frames[0]返回第一個子窗口，frames[1].frames[2]返回第二個子窗口內部的第三個子窗口，parent.frames[1]返回父窗口的第二個子窗口

　　需要注意的是，window.frames每個成員的值，是框架內的窗口(即框架的window對象)，而不是iframe標簽在父窗口的DOM節點。如果要獲取每個框架內部的DOM樹，需要使用window.frames[0].document的寫法

　　另外，如果iframe元素設置了name或id屬性，那么屬性值會自動成為全局變量，并且可以通過window.frames屬性引用，返回子窗口的window對象

文章列表