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();
类似资料：