JS 子窗口向父窗口傳值


首先我們來了解下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層元素的博客:

http://www.cnblogs.com/LYshuqian/p/3312383.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM