1： window.parent 是iframe頁面調用父頁面對象
<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中寫
<script type="text/javascript"> var _parentWin = window.parent ; _parentWin.form1.username.value = "xxxx" ; </script>
實例源碼：
1.a.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>
.b.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 打開的子頁面調用父頁面對象
源碼：
2.a.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> <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>
經過網友的提醒，確實需要注意的是，模態窗口的子窗口是沒有辦法修改父窗口頁面中的任何內容的。
例如修改：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");
在子窗口中當希望修改父窗口中的內容時，會彈出“某某”為空或不是對象的錯誤，而這里的“某某”就是你想修改的父窗口中的內容
需要注意的是：模態窗口調用父窗口也是window.parent來處理的。但是模態和window.open有個功能上的區別就是，模態的窗口不能刷新父頁面（刷新整個頁面，比如用window.location或form.submit等的處理），而使用window.open就可以進行刷新父窗口的操作
說說javascript中幾個內置對象的含義和使用方法。opener,self,parent
opener:對打開當前窗口的window對象的引用,如果當前窗口已被用戶打開,則opener的值為null.
self:自引用屬性,是對當前window對象的應用,與window屬性同義.
self代表自身窗口,opener代表打開自身的那個窗口,比如窗口A打開窗口B.如果靠window.open方法,則對於窗口B,self代表B自己,而opener代表窗口A.
opener即誰打開我的，比如A頁面利用window.open彈出了B頁面窗口，那么A頁面所在窗口就是B頁面的
opener，在B頁面通過opener對象可以訪問A頁面。
parent表示父窗口，比如一個A頁面利用iframe或frame調用B頁面，那么A頁面所在窗口就是B頁面的parent。
在JS中，window.opener只是對彈出窗口的母窗口的一個引用。比如：
a.html中，通過點擊按鈕等方式window.open出一個新的窗口b.html。那么在b.html中，就可以通過
window.opener（省略寫為opener）來引用a.html，包括a.html的document等對象，操作a.html的內容。
假如這個引用失敗，那么將返回null。所以在調用opener的對象前，要先判斷對象是否為null，否則會出現“對象為空或者不存在”的JS錯誤。
<html> <body> <form. name=form1> <input type=text name=inpu > <input type=button > </form> </body> </html>
——————————–
back2opener.html
——————————–
<html> <body> <form. name=form1> <input type=text name=inpu > <a href=# >添加</a> </form> </body> </html>
window.opener 返回的是創建當前窗口的那個窗口的引用，比如點擊了a.htm上的一個鏈接而打開了
b.htm，然后我們打算在b.htm上輸入一個值然后賦予a.htm上的一個id為“name”的textbox中，就可以
寫為：
window.opener.document.getElementById(“name”).value = “輸入的內容”;
下面是opener和showModalDialog刷新父頁面的方法：
opener：關閉自己window.close(); 刷新父頁面opener.location.reload(); 應該先刷新,再關閉.
showModalDialog 的時候：
在子窗口中輸出javascript代碼windows.returnValue= '1 '，在父窗口中if(showModalDialog(...)== '1 ') refresh();
refresh()為你自己寫的JAVASCRIPT函數，用於刷新頁面。
也可以解釋如下：
1.在打開窗口得時候把父窗體做為參數傳遞給新窗口
window.showModalDialog(url,window,style);
2.在新打開得窗口得unload得事件中寫如下代碼:
var args = window.dialogArguments;
args.location.reload();
實例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN "> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME= "Generator " CONTENT= "EditPlus "> <META NAME= "Author " CONTENT= " "> <META NAME= "Keywords " CONTENT= " "> <META NAME= "Description " CONTENT= " "> <script language= "javascript "> <!-- function doSearch(){ var s = new Object(); s.name = "aaa "; var k = window.showModalDialog( "child.html ",s, "dialogWidth:235px;status:no;dialogHeight:185px "); if(k.type== " ")//傳遞回的type為空的時候才刷新頁面。 { alert( "刷新 "); location.reload(); } } //--> </script> </HEAD> <BODY> <input type = "button " value= "openChild " onclick= "doSearch() "> </BODY> </HTML>
child.html ：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN "> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME= "Generator " CONTENT= "EditPlus "> <META NAME= "Author " CONTENT= " "> <META NAME= "Keywords " CONTENT= " "> <META NAME= "Description " CONTENT= " "> <SCRIPT LANGUAGE=javascript FOR=window EVENT=onload> <!-- var s = new Object();//這里是關鍵若用戶為單擊按鈕，已其它方式關閉按鈕，則把type= " " 傳遞回去。以免出現問題。且刷新父頁面。 s.type= " "; window.returnValue = s; //--> </SCRIPT> </HEAD> <BODY> <input type = "button " value= "返回不刷新 " onclick= "doSearch() "> </BODY> </HTML> <script language=javascript> <!-- var k=window.dialogArguments; //使用傳遞過來的 "aaa "; //.......... function doSearch() { var s = new Object(); s.type= "OK ";//設置返回值。//這里返回不刷新父頁面。 window.returnValue=s; window.close(); } //--> </script>