window和frame的用法

window.top、window.parent与window.opener的区别

top：

该变更永远指分割窗口最高层次的浏览器窗口。
如果计划从分割窗口的最高层次开始执行命令，就可以用top变量。

parent：

该变量指的是包含当前分割窗口的父窗口。
如果在一个窗口内有分割窗口，而在其中一个分割窗口中又包含着分割窗口，则第2层的分割窗口可以用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();