JavaScript 父子页面相互调用总结
父子页面相互调用是一个在开发中经常遇到的问题，但是没有找到过比较全面的文章介绍。在此总结下来，供大家参考。
四种方式
一般情况下，我们可以使用iframe、window的open、showModalDialog、showModelessDialog方法这四种方式打开一个子窗口。(showModalDialog、showModelessDialog是IE独有的。)
下面分这四种方式来讨论如何父子页面互相调用。
分情况讨论
iframe
在这种情况下，子页面直接通过parent.var就可以对父页面的变量和方法进行操作。
父页面可以通过拿到iframe的contentWindow对象来访问子页面的window。
父页面代码，文件名为iframe.html。
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <script> var testVar = "我是父窗口测试变量"; var childFrame; function getChildVar(){ var childFrame = document.getElementById("childFrame"); var childWindow = childFrame.contentWindow alert(childWindow.testVar); } </script> <iframe id="childFrame" name="childFrame" frameBorder="0" src="iframe.child.html" style="border:1px solid black;"> </iframe> <br /> <button onclick="getChildVar();">拿到子页面的变量</button> </body> </html> |
子页面代码，文件名为iframe.child.html。
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <script> var testVar = "我是子窗口测试变量"; </script> 我是在IFrame中的子窗体。 <button onclick="alert(parent.testVar);">拿到父页面的testVar</button> </body> </html> |
open
使用window.open打开的子页面，在子页面中可以通过window.opener来访问父页面的window对象。
在父页面中，可以通过window.open方法的返回值拿到子页面的window，就可以操作子页面的变量和方法。
父页面代码，文件名为window.open.html。
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>window.open父页面</title> </head> <body> <script> var testVar = "我是父窗口测试变量"; var childFrame; function openWindow(){ childFrame = window.open("window.open.child.html"); } function getChildVar(){ alert(childFrame.testVar); } </script> <button onclick="openWindow();">使用window.open打开子页面</button> <button onclick="getChildVar();">拿到子页面的变量</button> </body> </html> |
子页面代码，文件名为window.open.child.html。
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>window.open子页面</title> </head> <body> <script> var testVar = "我是子窗口测试变量"; alert(window.opener.testVar); </script> </body> </html> |
showModalDialog
使用showModalDialog打开的子页面，如果想访问父页面的window，需要在执行showModalDialog方法的时候，把父页面的window当作参数传递过去。见父页面的代码。
因为showModalDialog是阻塞的，父页面的代码在子页面不关闭之前无法继续执行，所以只能通过returnValue拿到子页面的变量，见子页面的代码。
父页面代码，文件名为ShowModalDialog.html。
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>ShowModalDialog父页面</title> </head> <body> <script> var testVar = "我是父窗口测试变量"; function openDialog(){ var testVar = showModalDialog("ShowModalDialog.Child.html",window); alert(testVar); } </script> <button onclick="openDialog();">OpenDialog</button> </body> </html> |
子页面代码，文件名为ShowModalDialog.Child.html。
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>ShowModalDialog子页面</title> </head> <body> <script> var testVar = "我是子窗口测试变量"; function getParent(){ var parentWindow = window.dialogArguments; alert(parentWindow.testVar); } function closeMe(){ returnValue = testVar; window.close(); } </script> 我是使用ShowModalDialog打开的子页面。 <br /> <button onclick="getParent()">getParent</button> <button onclick="closeMe()">closeMe</button> </body> </html> |
showModelessDialog
使用showModelessDialog打开的子页面，同样需要在执行方法的时候，把父页面的window当作参数传递过去。
但不同之处在于showModelessDialog会直接返回子页面的window对象，不是阻塞的，可以直接对子页面的方法和变量进行访问。
父页面代码，文件名为ShowModelessDialog.html：
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>ShowModalDialog父页面</title> </head> <body> <script> var testVar = "我是父窗口测试变量"; function openDialog(){ var childWindow = showModelessDialog("ShowModelessDialog.Child.html",window); alert(childWindow.testVar); } </script> <button onclick="openDialog();">OpenDialog</button> </body> </html> |
子页面代码，文件名为ShowModelessDialog.html。
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>ShowModalDialog子页面</title> </head> <body> <script> var testVar = "我是子窗口测试变量"; function getParent(){ var parentWindow = window.dialogArguments; alert(parentWindow.testVar); } function closeMe(){ returnValue = testVar; window.close(); } </script> 我是使用ShowModalDialog打开的子页面。 <br /> <button onclick="getParent()">getParent</button> <button onclick="closeMe()">closeMe</button> </body> </html> |
