window.top、window.parent與window.opener的差別
top：
該變更永遠指分割視窗最高層次的浏覽器視窗。
如果計劃從分割視窗的最高層次開始執行指令，就可以用top變量。
parent：
該變量指的是包含目前分割視窗的父視窗。
如果在一個視窗内有分割視窗，而在其中一個分割視窗中又包含着分割視窗，則第層的分割視窗可以用parent變量引用包含它的父分割視窗。
opener：
指用window.open()等方式建立的新視窗對應的原視窗。
對打開目前視窗的window對象的引用，如果目前視窗被使用者打開，則它的值為null。
self：自引用屬性，是對目前window對象的應用，與window屬性同義。
self代表自身視窗，opener代表打開自身的那個視窗，比如視窗A打開視窗B。
如果靠window.open方法，則對于視窗B，self代表B自己，而opener代表視窗A。
IFrame與window對象(contentWindow)
IFRAME
IFRAME 元素也就是文檔中的文檔
window 對象
浏覽器會在其打開一個 HTML 文檔時建立一個對應的 window 對象。
但是，如果一個文檔定義了一個或多個架構(即，包含一個或多個 frame 或 iframe 标簽)，浏覽器就會為原始文檔建立一個 window 對象，再為每個架構建立額外的 window 對象。這些額外的對象是原始視窗的子視窗，可能被原始視窗中發生的事件所影響。
例如，關閉原始視窗将導緻關閉全部子視窗。如果想要建立新視窗(以及對應的 window 對象)，可以使用像 open, showModalDialog 和 showModelessDialog 這樣的方法。
contentWindow
contentWindow屬性是指指定的frame或者iframe所在的window對象；
在IE中iframe或者frame的contentWindow屬性可以省略，但在Firefox中如果要對iframe對象進行編輯則必須指定contentWindow屬性。經測試firefox同樣可以省略，可能是和火狐版本有關
frame架構的小案例：
首頁面main.html，中有frameset包含的架構，包含兩個frame：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Window和window差別</title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="text/javascript">
function parentFun() {
alert("parentFun");
}
</script>
<frameset cols="15%,*">
<frame src="leftTree.html" name="leftTree" id="leftTree" />
<frame src="content.html" name="middle" id="middle" />
</frameset>
</html>
leftTree.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左側樹</title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="application/javascript">
$(document).ready(function() {
//擷取同級的frame對象， "middle"為frame的id屬性值
var middleFrame = window.parent.window.frames["middle"];
//調用同級frame中定義的函數
middleFrame.middleFun();
//調用父視窗的方法
parent.window.parentFun();
});
</script>
<body>
<h1>左側樹</h1>
<img src="img/a.png"/>
</body>
</html>
content.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁面</title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="application/javascript">
function middleFun() {
alert("middleFun");
}
</script>
<body>
<h1>首頁面</h1>
</body>
</html>
總結：
（1）擷取同級的frame對象，并調用其方法；
//擷取同級的frame對象， "middle"為frame的id屬性值
var middleFrame = window.parent.window.frames["middle"];
//frame對象可以直接調用window的函數
//middleFrame.xxxfunction();
//frame對象的contentWindow屬性也可以調用window的函數
//middleFrame.contentWindow.xxxfunction();
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)