父子頁面相互呼叫是一個在開發中經常遇到的問題，但是沒有找到過比較全面的文章介紹。在此總結下來，供大家參考。

四種方式

一般情況下，我們可以使用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>