Javascript父窗口和子窗口的函数或对象相互访问

<script>
var sub
function sub_win(){
sub=window.open()     //sub为子窗口句柄
//以数据流方式向子窗口输出HTML代码 ,sub_function()为子窗口的演示函数
sub.document.write("<script>function sub_function(){alert(’子窗口函数’)}<//script><button onClick=’opener.par_function()’>调用父窗口函数</button>")        
sub.document.close() //关闭子窗口的输出流
}
function par_function(){//父窗口的演示函数
alert("父窗口函数")
}
</script>
<button onClick="sub_win()">打开子窗口</button><button onClick="sub.sub_function()">调用子窗口内函数</button>

代码运行效果如图1.5.6所示。

图1.5.6 在父窗口访问子窗口的函数

从上面的代码中可以发现，父窗口调用子窗口的函数或对象，需要在对象前加上子窗口句柄(上例中的变量sub)作前缀，要访问子窗口中的sub_function()函数，就是sub.sub_function()，反过来，在子窗口中访问父窗口的函数或对象，需要在前面加上opener，如opener.par_function()。
提示：这里只是为了演示方便，以数据流方式向子窗口中输出HTML代码，在实际应用时直接在弹出页中按上面所说的方法调用就行了。

2.用showModalDialog打开的模式窗口。

<script>
function smdWin(){
win=window.showModelessDialog("demo.htm",window,"dialogWidth=200px;dialogHeight=200px;status=0;scroll=no")
}
</script>
<button οnclick="smdWin()">打开模式窗口</button>
<input id="oInput">

demo.htm：

<input id="sInput">
<button onClick="dialogArguments.oInput.value=sInput.value">传递文字</button>

代码运行效果如图1.5.7所示。

图1.5.7 在子窗口访问父窗口的对象

注意：在模式对话框的父窗口中无法通过鼠标操作控制访问模式对话框的对象，但可以通过设置自动执行的脚本来实现访问，方法同无模式对话框。

3.用showModelessDialog方法打开的无模式窗口

<script>
var win
function smdWin(){
win=window.showModelessDialog("demo.htm",window,"dialogWidth=200px;dialogHeight=200px;status=0;scroll=no")
}
</script>
<button οnclick="smdWin()">打开无模式窗口</button>
<input id="oInput">
<button onClick="win.sInput.value=oInput.value">传递文字</button>

demo.htm：

<input id="sInput">
<button onClick="dialogArguments.oInput.value=sInput.value">传递文字</button>

代码运行效果：

图1.5.8 在父窗口中访问子窗口的对象

图1.5.9 在子窗口中访问父窗口的对象

可以看出，父窗口和子窗口的数据传递基本方法是一样，只是模式窗口和无模式窗口在向父窗口传递数据时把一般窗口的opener换成了dialogArguments
注意：打开模式窗口或无模式窗口的第二个参数须为window，模式窗口的父窗口无法以常规方式即时向它传递数据，因为它的父窗口无法获得焦点。
技巧：父窗口要给子窗口传递数据，还可以通过给页地址后添加参数，然后在子窗口用location.search取值的方式来完成，还可以通过打开子窗口的第二个参数来完成，如：

<script>
var sub
function sub_win(){
sub=window.open("","demo","width=100,height=100")
sub.document.write("<script>alert(window.name)<//script>")  
sub.document.close()
}
</script>
<button onClick="sub_win()">打开子窗口</button>

图1.5.10 通过open方法的第二个参数传递数据