window.parent與window.opener的區別javascript呼叫主視窗方法
1： window.parent 是iframe頁面呼叫父頁面物件範例:
a.html
Html程式碼<html>
<head><title>父親頁</title></head>
<body>
<form name="form1" id="form1">
<input type="text" name="username" id="username"/>
</form>
<iframe src="b.html" width=100%></iframe>
</body>
</html>
如果我們需要在b.htm中要對a.htm中的username文字方塊賦值，就如很多上傳功能，上傳功能頁在Ifrmae中，上傳成功後把上傳後的路徑放入父頁面的文字方塊中我們應該在b.html中寫
Html程式碼
<script type="text/javascript">
var _parentWin = window.parent ;
_parentWin.form1.username.value = "xxxx" ;
</script>
實例位址： http://www.cnspry.cn/blog/attachments/window.parent實例/a.html
原始碼：
1.a.html
Html代碼
<html>
<head>
<title>主頁</title>
<script>
/** 為測試IFrame子視窗呼叫父視窗的全域變數而新增的測試變數*/
var parentVairous = "測試IFrame子視窗呼叫父視窗的全域變數而新增的測試變數";
function parentInvokeIFrame()
{
var iframeTest = document.frames["iframeTest"]; //使用document.getElementById("iframeTest");同樣可以
alert(iframeTest.document.body.innerHTML);
alert(iframeTest.iFrameVair);
}
</script>
</head>
<body>
<form name="form1" id="form1">
<input type="text" name="username" id="username"/>
<input type = "button" value = "父視窗呼叫IFrame子視窗中的內容" onclick = 'parentInvokeIFrame()'/>
</form>
<iframe src="b.html" width = '100%' id = 'iframeTest'></iframe>
</body>
</html>
1.b.html
Html代碼
<html>
<head>
<title></title>
<script type="text/javascript">
/** 為測試父窗體呼叫IFrame子窗體的全域函數而新增的子視窗全域函數*/
var iFrameVair = "測試父窗體呼叫IFrame子窗體的全域函數";
function UpdateParent()
{
var _parentWin = window.parent ;
_parentWin.form1.username.value = "xxxx" ;
}
function childInvokeParent()
{
var parentVairous = window.parent.window.parentVairous;
alert(parentVairous);
}
</script>
</head>
<body>
<form name="form1" id="form1">
<p> </p>
<p align="center">
<input type = "button"
name = "button"
id = "button"
value = "更新主頁面的UserName內容"
onclick = "UpdateParent()">
<input type = "button"
name = "button2"
id = "button2"
value = "測試IFrame子視窗呼叫父視窗的全域變數"
onclick = "childInvokeParent();"/>
</p>
<p> </p>
</form>
</body>
</html>
ps:不能跨域獲取，例如iframe的src是'http://www.xxx.ccc/'就不可以
2: window.opener 是window.open 開啟的子頁面呼叫父頁面物件實例位址：http: //www.cnspry.cn/blog/attachments/window.opener實例/a.html
原始碼：
2.a.html
Html代碼
<html>
<head>
<title>主頁</title>
<script type="text/javascript">
/** 為測試IFrame子視窗呼叫父視窗的全域變數而新增的測試變數*/
var parentVairous = "測試IFrame子視窗呼叫父視窗的全域變數而新增的測試變數";
/**
* 因為不同於IFrame（IFrame有id,window.open()與IFrame的父子視窗的模式不同）,
* 所以當是透過window.open()方法開啟一個新視窗使, 必須有一個新視窗的對象
* 當然必須先讓子視窗彈出來, 才能呼叫子視窗中的變數, 否則拋出異常
*/
var OpenWindow;
function openSubWin()
{
OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes,resizable=yes,location =no, status=no');
}
function parentInvokeChild()
{
if(OpenWindow)//當然必須先讓子視窗彈出來, 才能呼叫子視窗中的變數, 否則拋出異常
{
alert(OpenWindow.iFrameVair);
}
}
</script>
</head>
<body>
<form name="form1" id="form1">
<input type="text" name="username" id="username"/>
<input type="button" value="彈出子頁面" onclick = "openSubWin()">
<input type="button" value="測試呼叫彈出視窗中的全域變數" onclick = "parentInvokeChild()">
</form>
</body>
</html>
2.b.html
Html代碼
<html>
<head>
<title>子頁</title>
<script type="text/javascript">
/** 為測試父窗體呼叫IFrame子窗體的全域函數而新增的子視窗全域函數*/
var iFrameVair = "測試父窗體呼叫IFrame子窗體的全域函數";
function UpdateParent()
{
var _parentWin = window.opener;
_parentWin.form1.username.value = "xxxx" ;
}
function childInvokeParent()
{
var parentVairous = window.opener.window.parentVairous;
alert(parentVairous);
}
</script>
</head>
<body>
<form name="form1" id="form1">
<p> </p>
<p align="center">
<input type="button"
onclick = "UpdateParent();"
name="button"
id="button"
value="更新主頁面的UserName內容">
<input type = "button"
name = "button2"
id = "button2"
value = "測試IFrame子視窗呼叫父視窗的全域變數"
onclick = "childInvokeParent();"/>
</p>
<p> </p>
</form>
</body>
經過hanjs的提醒，確實需要注意的是，模態視窗的子視窗是沒有辦法修改父視窗頁面中的任何內容的。
例如修改：OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes,resizable= yes,location=no, status=no');
為：OpenWindow = window.showModalDialog("b.html",'newwindow',"dialogHeight:100px,center:yes,resizable:no,status:no");
在子視窗中當希望修改父視窗中的內容時，會跳出「某某」為空或不是物件的錯誤，而這裡的「某某」就是你想修改的父視窗中的內容