文章出處

框架：

在網絡上我們可以看到很多WEB應用程序都是使用框架（frame）來分隔瀏覽器窗口的，就想一塊塊玻璃隔板把窗口分隔成好幾個小窗口，并且可以在不同的小窗口中加載顯示不同的頁面，這樣在我們看來好像是一個完整的頁面，但實際上它是由幾個頁面組合而成的。

javascript允許我們操作框架，在一個框架中定義的變量和函數可以在另一個框架中使用。這樣做可以實現兩個優點。

代碼模塊化：可以把通用的代碼和屬性統一放在一個框架中，然后在其他頁面中使用。那么這個放置通用函數和屬性的框架就叫做代碼模塊。
可以方便在頁面中傳遞信息。如果你把函數或變量放置在定義框架集頁面中，那么你在修改框架中的頁面，在框架集頁面中定義的屬性和方法也不會改變。

定義框架用<frameset/>元素包含<frame/>元素，在<frameset/>元素定義框架的顯示結構（方式），在<frame/>元素中定義每個框架并指定要包含的文檔。

在前面我們都是說單個頁面，而單個頁面就是一個window對象，但如果頁面中有多個框架，那么除了框架集的頂層window對象外，每個框架都對應一個window對象。這些框架window對象都包含在頂層window對象中。

舉個例子說明測試請用ie8

定義框架集頁面html.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chapter 8: Example 1</title>
</head>
<frameset rows="50%, *" id="topWindow">
    <frame name="uphtml" src="uphtml.html" />
    <frame name="downhtml" src="downhtml.html" />
</frameset>
</html>

這個框架集頁面包含兩個框架，分別對應uphtml.html和downhtml.html頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
	body{background: yellow;width: 100%;height: 500px;}
	</style>
	<script>
	function fun01(){
		alert(window.parent.location.href);
		alert(window.name);
	}

	</script>
</head>
<body onload="fun01()">
我是上面的頁面
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
	body{background: red}
	</style>
		<script>
	function fun01(){
		alert(window.parent.location.href);
		alert(window.name);
	}

	</script>
</head>
<body>
我是下面的頁面
</body>
</html>

它們的父親都是html.html頁面。

parent屬性：

它允許訪問當前框架的父框架的window對象。通過這屬性就可以訪問父window對象的所有屬性和方法。也可以通過訪問父框架來訪問其他包含在父框架中的其他框架。

有個問題就是如果底層有很多框架那么用這方法訪問頂層框架就有點麻煩，這是我們可以使用

top屬性：

可以直接返回頂層窗口的window對象引用，無論是嵌套的多深。

這兩個屬性各有有點，parent屬性返回的是當前窗口的父窗口，上一層，window.parent，再上一層是window.parent.parent依次類推。top屬性無論什么框架的結構都直接返回最頂層窗口。

parent依賴于其上的框架結構，如果框架中嵌套的是其他網站的，那么top可能不是原來的框架了。這是需要注意的，這里可以通過腳本來判斷。

IFrames

內嵌框架IFrames，通過它可以把內聯框架添加到頁面中。通過它們可以給網頁添加框架也無須使用框架集。

<iframe  name="myhml" src="myhtml.html"></iframe>

這代碼是把名為myhtml的框架添加到頁面中，該框架加載了myhtml.html文檔。

訪問IFrames對象也很簡單。

如：

window.myhtml 直接通過名字
window.iframe["myhtml"] 通過名字+索引

window.iframe[0] 用索引數字

打開新窗口

所有的最新版的瀏覽器都阻止彈出窗口的功能，默認的情況下會阻止彈出在頁面加載時自動創建的新窗口。但一般不會阻止在用戶必須執行某個操作（如單擊連接或按鈕）時打開的窗口，但用戶可以修改瀏覽器的設置來阻止彈出這種窗口。

window對象的open()方法會打開新窗口，它接受三個參數，其中第三個可選，該方法返回對新瀏覽器窗口的window對象的引用。使用這個引用可以執行與處理window對象所能進行執行的所有操作。

window對象的open()方法：

第一個參數是要在新窗口打開的頁面的URL，若給此參數傳送空字符串，得到的是一個空白頁面，再使用document.write()方法在新窗口中動態插入html.第二個參數是要分配給新窗口的名稱，這個不是為了提供給腳本使用，而是提供給a連接target屬性使用，即點擊該連接時會打開這個名稱的窗口。

	<a href="downhtml.html" target="myopen">fff </a>

這表示單擊連接時，downhtml.html頁面會加載到新窗口，而不是當前窗口中。form元素的target屬性也是這樣。

打開的新窗口中，窗口會默認帶一些屬性，如width和height，該方法的第三個參數可以指定這些屬性，另外很多瀏覽器窗口的大多特性都是默認關閉。

window對象的close()方法：

關閉剛打開的窗口。

window對象的closed屬性

判斷窗口是否關閉，如果窗口關閉，該屬性返回true，如果仍然打開，則返回false。

document.write()方法：

每次使用該方法時，文本都會添加到已有內容的后面，直到是使用document.close()方法關閉文檔為止。那么再使用document.wire()方法時，所傳送的文本就會替換已有的html，而不是添加在內容的末尾。

open()方法的第三個參數

窗口的特性	可以取的值	描述
copyHistory	yes/no	當打開新窗口時復制當前窗口的歷史記錄
directories	yes/no	顯示目錄按鈕
height	整數	新窗口的高度
width	整數	新窗口的寬度，以像數為單位
left	整數	新窗口距屏幕左邊界的距離
location	yes/no	顯示地址文本字段
menubar	yes/no	顯示菜單欄
resizable	yes/no	打開新窗口后，允許用戶重置新窗口的大小
scrollbars	yes/no	如果頁面太大，在新窗口中放不下，就顯示滾動條
status	yes/no	顯示狀態欄
toolbar	yes/no	顯示工具欄
top	整數	新窗口距屏幕頂部的距離