（面试题）子窗口创建及父窗口与子窗口之间通信方法是怎么样的？---百度文库

第一部分 Javascript弹出子窗口

可以通过多种方式实现，下面介绍几种方法

(1) 通过window对象的open()方法，open()方法将会产生一个新的window窗口对象

window.open(URL,windowName,parameters); 

也可以这样写： var newWindow = open('','_blank'); 

【注意】：这样就可以引用newWindow子窗口对象，可以在父窗口中操作子窗口

 

（2）使用普通的模式窗口

如：

alert(""); //弹出信息提示对话框 

confirm(""); //弹出信息确认对话框  

prompt(""); //具有交互性质的对话框 

（3）使用模态对话框

//创建模态你对话框   

window.showModalDialog(sURL,vArguments,sFeatures)

//创建非模态对话框   

window.showModelessDialog(sURL,vArguments,sFeatures)

第二部分 子窗口与父窗口间通信 

从父窗口传值到子窗口 
(1) 使用window.open()创建的窗口与父窗口通信 
可以在子窗口页面中通过window.opener来获取父窗口对象，获取之后子窗口便可以对父窗口执行刷新，传值等操作。 
如： 
window.opener.location.reload(); //子窗口刷新父窗口 
window.opener.location.href //获取父窗口href 
window.opener.locaiton.pathname //获取父窗口路径名 

//刷新父页面 
window.location.href=window.location.href ; //重新定位父页面 
window.location.reload; 


(2) 模态窗口与父窗口通信 
通过使用showModelDialog(),及showModelessDialog（）方法创建的子窗口想与父窗口通信时，不能通过window.opener 来获取父窗口对象。要实现通信，必须在创建模态子窗口时向子窗口传入父窗口对象。 
实现方式为： 
在父窗口中： 
var newWin=window.showModelDialog(url,window,''); 
newWin.open(); 
此时参数window即是父窗口对象 
在子窗口中： 
需首先获取父窗口对象，然后才能使用父窗口对象。由于父窗口对象是在创建 
子窗口时通过传入参数的方式传入的，因此，在子窗口中也只能通过获取窗口参数的方式获取父窗口对象。获取方式如下 ： 
var parent=widnow.dialogArguments； 
变量parent便是父窗口对象。 
例如： 
//通过子窗口提交父窗口中的表单：form1,提交后执行查询操作 
var parent=window.dialogArguments; 
parent.document.form1.action="QueryInfor.jsp"; 
parent.submit(); 

//刷新父页面 
var parent=window.dialogArguments; 
parent.location.reload(); 

 从子窗口传值到父窗口 
要实现在模态子窗口中传值到父窗口，需要使用window.returnValue完成 
实现方法如下：

在子窗口中： 
//获取父窗口某字段值，对该值加一后返回父窗口 
var parent=window.dialogArguments; 
var x=parent.docuement.getElementById("age").value; 
x=x+1； 
//传回x值 
window.returnValue=x; 
在父窗口中： 
//获取来自子窗口的值 
var newWin=window.showModelDialog(url,window,''); 
if(newWin!=null) 
document.getElementById("age").value=newWin; 
//在子窗口中设置父窗口的值 
在子窗口中向父窗口中传入值似乎没有直接设置父窗口中的值来得明了。直接设置父窗口中元素的值显得要更灵活一些,不过具体使用哪种方法要根据实际情况和已有的实现方式而定，因为如果使用了不切实际的方法不仅降低开发效率，也降低了执行效率，往往也会造成不优雅的实现方式和代码风格。 

子窗口设置父窗口的值使用方法如下： 
子窗口中： 

var parent=window.dialogArguments; 
var x=parent.document.getElementById("age").value; 
x=x+1； 
//设置父窗口中age属性值 
parent.document.getElementById("age").value=x; 
以上是我在项目中使用javascript解决子窗口问题时，收集及积累的一些方法和资料。我是使用建立模态窗口的方式来实现的（这主要与项目本身有关），不过其实不论是使用window.open()还是使用window.showModelDialog()进行传参等操作时虽然在实现方法上有很大的差别，初次接触会觉得有点乱，但只要理清子窗口与父窗口之间的关系和角色之后，就很好理解了。

 

补充：

如果是用到框架iframe，则可以使用top、parent 表示父窗口，可以操作父窗口的属性方法等；

父窗口向子窗口传参控制，可以通过url传参，或者保留一个子窗口的引用，操作子窗口；

如果是open方式，也可以通过url或或者保留一个子窗口的引用，操作子窗口。