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> |