Web页面父子窗口交互总结
一、主要四种方式
| 类型名称 |
子窗口引用父窗口 |
父窗口引用子窗口 |
| Iframe |
通过parent.var就可以对父页面的变量和方法进行操作 |
通过获取Iframe的contentWindow对象来访问子页面的window |
| Open |
通过window.opener来访问父页面的window对象 |
通过window.open方法的返回值拿到子页面的window，就可以操作子页面的变量和方法 |
| ShowModalDialog |
访问父页面的window，需要在执行showModalDialog方法的时候，把父页面的window当作参数传递过去 |
因为showModalDialog是阻塞的，父页面的代码在子页面不关闭之前无法继续执行，所以只能通过returnValue拿到子页面的变量 |
| ShowModelessDialog |
需要在执行方法的时候，把父页面的window当作参数传递过去 |
showModelessDialog会直接返回子页面的window对象，不是阻塞的，可以直接对子页面的方法和变量进行访问 |
二、详细说明
1、Iframe
页面引用Iframe代码，可设置引用页面的外观样式：
";
父窗口访问子窗口的方法、属性、html元素
子窗口访问父窗口的方法、html元素
子窗口间的相互访问
2、Open
a、window.open(pageURL ,name, parameters) 其中： pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数
b、window.open ('page.html','newwindow','height=150,width=300,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no , location=no, status=no')
其中yes/no也可使用1/0；
pixel value为具体的数值，单位象素。
参数 | 取值范围 | 说明
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value |窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
3、showModalDialog 和 showModelessDialog
window.showModalDialog(sURL [, vArguments] [,sFeatures]) 模态窗口
window.showModelessDialog(sURL [, vArguments] [,sFeatures]) 非模态窗口
参数说明：
a、sURL--必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
b、vArguments--可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通window.dialogArguments来取得传递进来的参数。
c、sFeatures--可选参数，类型：字符串。用来描述对话框的外观等信息，eg：dialogWidth=350px; dialogHeight=350px ; status:no ; help:no ，用分号“;”隔开。
异同
同：两者弹出的窗体不能刷新
异：前者是模态窗口，始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果；后者是非模态窗口，被打开后，用户可以随机切换输入焦点，还可以操作父窗口。
a、父子窗口交互，在父窗口中：
var newWin=window.showModelDialog(url,window,'');
newWin.open();
此时参数window即是父窗口对象
在子窗口中：
需首先获取父窗口对象，然后才能使用父窗口对象。由于父窗口对象是在创建子窗口时通过传入参数的方式传入的，因此，在子窗口中也只能通过获取窗口参数的方式获取父窗口对象。
方式如下：
var parent=widnow.dialogArguments；
parent.location.reload(); //刷新父页面
变量parent便是父窗口对象
b、 要实现在模态子窗口中传值到父窗口，需要使用window.returnValue完成
c、 子窗口设置父窗口的值
var x=parent.document.getElementById("age").value;
x=x+1；
//设置父窗口中age属性值
parent.document.getElementById("age").value=x;
三、总结：
window.parent特性来判断这个窗口是否是顶层窗口。如：
function is_toplevel(w){
return (w.parent == w);
}
window.opener(parent).location.reload(); //子窗口刷新父窗口
window.opener.location.href //获取父窗口href
window.opener.locaiton.pathname //获取父窗口路径名
//刷新父页面
window.location.href=window.location.href ; //重新定位父页面
window.location.reload;
很多细节之处需注意！