首先我們來了解下window對象的的方法open:
1,open() 方法用於打開一個新的瀏覽
window.open(URL,name,features,replace)
重要事項:請不要混淆方法 Window.open() 與方法 Document.open(),這兩者的功能完全不同。為了使您的代碼清楚明白,請使用 Window.open(),而不要使用 open()。
2,opener
opener 屬性是一個可讀可寫的屬性,可返回對創建該窗口的 Window 對象的引用。---這句話怎么理解呢,例如
opener即誰打開我的,比如A頁面利用window.open彈出了B頁面窗口,那么A頁面所在窗口就是B頁面的opener,在B頁面通過opener對象可以訪問A頁面。
注意:要求父窗口打開子窗口時須使用window.open方法才能使用window.opener回傳值。
window.opener.document.getElementById("Downloads").value = '新值';
附上一個子窗口向父窗口傳值的例子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js實現子窗口傳值到父窗口--父頁面</title> 6 </head> 7 <body> 8 <!--open() 方法用於打開一個新的瀏覽器窗口或查找一個已命名的窗口。--> 9 <input type="button" value="打開子窗口" onclick="open_win('children.html','children','800','600')"/> 10 11 <input value="333" id="Downloads" /> 12 13 <script> 14 function open_win(url, title, w, h) { 15 var iWidth = w; 16 var iHeight = h; 17 var iTop = (window.screen.availHeight-30-iHeight)/2; //獲得窗口的垂直位置; 18 var iLeft = (window.screen.availWidth-10-iWidth)/2; //獲得窗口的水平位置; 19 myWindow = window.open( url, title, 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ', toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no, titlebar=yes, alwaysRaised=yes'); 20 } 21 22 </script> 23 </body> 24 </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js實現子窗口傳值到父窗口--子頁面</title> </head> <body> 我是子窗口 <script> window.onload = function(){ window.opener.document.getElementById("Downloads").value = '新值'; } </script> </body> </html>
注意:這兩個文件不能再本地直接打開,會報錯:必須要在架設在服務器上
children.html:11 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
opener 屬性非常有用,創建的窗口可以引用創建它的窗口所定義的屬性和函數。
window.opener
注釋:只有表示頂層窗口的 Window 對象的 operner 屬性才有效,表示框架的 Window 對象的 operner 屬性無效。
3,再來談談opener與parent的區別 並附上top
window.parent 是iframe頁面調用父頁面對象,當我們想從iframe內嵌的頁面中訪問外層頁面是可以直接利用window.parent獲取,window.opener 是window.open或超鏈接<a> 打開的子頁面調用父頁面對象
parent表示父窗口,parent用於在iframe,frame中生成的子頁面中訪問父頁面的對象。比如一個A頁面利用iframe或frame調用B頁面,那么A頁面所在窗口就是B頁面的parent。
top 屬性返回最頂層的先輩窗口。
該屬性返回對一個頂級窗口的只讀引用。如果窗口本身就是一個頂級窗口,top 屬性存放對窗口自身的引用。如果窗口是一個框架,那么 top 屬性引用包含框架的頂層窗口。
window.top
可應用於彈框跳出框架
function breakout() { if (window.top!=window.self) { window.top.location="/example/hdom/tryjs_breakout.htm" } } </script> </head> <body> <input type="button" onclick="breakout()" value="跳出框架!">
附:Window對象、Parent對象、Frame對象、Document對象和Form對象的階層關系
Window對象→Parent對象→Frame對象→Document對象→Form對象,
如下: parent.frame1.document.forms[0].elements[0].value;
4,模態窗口與父窗口通信
目前谷歌瀏覽器不支持showModelDialog
通過使用showModelDialog(),及showModelessDialog()方法創建的子窗口想與父窗口通信時,不能通過window.opener
來獲取父窗口對象。要實現通信,必須在創建模態子窗口時向子窗口傳入父窗口對象。
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
URL--必選參數,類型:字符串。用來指定對話框要顯示的文檔的URL。
vArguments--可選參數,類型:變體。用來向對話框傳遞參數。傳遞的參數類型不限,包括數組等。對話框通過window.dialogArguments來取得傳遞進來的參數。
sFeatures-- 可選參數,類型:字符串。用來描述對話框的外觀等信息,可以使用以下的一個或幾個,用分號“;”隔開。
1.dialogHeight :對話框高度,不小於100px,IE4中dialogHeight 和 dialogWidth 默認的單位是em,而IE5以上是px,為方便其見,在定義modal方式的對話框時,用px做單位。
2.dialogWidth: 對話框寬度。
3.dialogLeft: 離屏幕左的距離。
4.dialogTop: 離屏幕上的距離。
5.center: {yes | no | 1 | 0 }:窗口是否居中,默認yes,但仍可以指定高度和寬度。
6.help: {yes | no | 1 | 0 }:是否顯示幫助按鈕,默認yes。
7.resizable: {yes | no | 1 | 0 } 〔IE5+〕:是否可被改變大小。默認no。
8.status: {yes | no | 1 | 0 } 〔IE5+〕:是否顯示狀態欄。默認為yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }:指明對話框是否顯示滾動條。默認為yes。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
例子:子頁面向父頁面傳值
父頁面
<body> <!--open() 方法用於打開一個新的瀏覽器窗口或查找一個已命名的窗口。--> <input type="button" value="打開子窗口" onclick="open_win()"/> <input value="333" id="Downloads" /> <script> function open_win(){ var str =window.showModalDialog("children.html","","dialogWidth=400px;dialogHeight=500px"); alert(str); } </script>
子頁面:
<body> 我是子窗口 <script type="text/javascript"> window.returnValue="http://www.jb51.net"; </script> </body>
附上一篇:iframe層獲取父頁面元素,父頁面獲取iframe層元素的博客: