|
解决思路：
每一个窗口其实也是一个对象，窗口内的对象或函数就相当于对象内的对象或方法，问题的关键是如何取得窗口对象的控制句柄，不同的窗口的控件句柄是不一样的，下面分三种窗口讨论。  具体步骤： 1.用window.open()打开的一般窗口。 <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 onclick="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 onclick="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方法的第二个参数传递数据 特别提示 对于第一种情况，代码运行后，先单击【打开子窗口】按钮，然后再单击【调用子窗口内函数】和【调用父窗口函数】按钮看效果；第二、三种情况的代码运行后在模式/无模式窗口的文本框中填写内容后再单击【传递文字】按钮。 特别说明通过本例的学习，读者朋友应该掌握父窗口与子窗口的相互访问方法，还有对象的概念。 例如，父窗口这样写：
…… <head> <script> function F() { alert("父窗口函数"); } </script> </head> <body onload="open('2.htm')"> <input type=hidden id=F1 onclick="F()"> 在子窗口中这样写： <input type=button value="执行父窗口函数" onclick="javascript:window.opener.document.all.F1.click()"> 或者干脆这样写：<input type=button value="执行父窗口函数2" onclick="javascript:opener.F()"> |
|
|
