$("#父窗口元素ID",window.parent.document);

對(duì)應(yīng)javascript版本為window.parent.document.getElementByIdx_x("父窗口元素ID")；

取父窗口的元素方法：$(selector, window.parent.document);
那么你取父窗口的父窗口的元素就可以用：$(selector, window.parent.parent.document);

類(lèi)似的，取其它窗口的方法大同小異
$(selector, window.top.document);
$(selector, window.opener.document);
$(selector, window.top.frames[0].document);

--------------------------------------------------------------------------------------------------

子窗口創(chuàng)建及父窗口與子窗口之間通信：

1、Javascript彈出子窗口

可以通過(guò)多種方式實(shí)現(xiàn)，下面介紹幾種方法

(1) 通過(guò)window對(duì)象的open()方法，open()方法將會(huì)產(chǎn)生一個(gè)新的window窗口對(duì)象

其用法為：
window.open(URL,windowName,parameters);

URL: 描述要打開(kāi)的窗口的URL地址，如何為空則不打開(kāi)任何網(wǎng)頁(yè)；

windowName:描述被打開(kāi)的窗口的民稱(chēng)，可以使用'_top'、'_blank'等內(nèi)建名稱(chēng)，這里的名稱(chēng)跟<a href="..." target="...">里的target屬性是一樣的。

parameters:描述被打開(kāi)的窗口的參數(shù)值，或者說(shuō)是樣貌，其包括窗口的各個(gè)屬性值，及要傳入的參數(shù)值。

例如：

打開(kāi)一個(gè) 400 x 100 的干凈的窗口：
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')

也可以這樣寫(xiě)： var newWindow = open('','_blank');

參數(shù)說(shuō)明如下：

top=# 窗口頂部離開(kāi)屏幕頂部的像素?cái)?shù)
left=# 窗口左端離開(kāi)屏幕左端的像素?cái)?shù)
width=# 窗口的寬度
height=# 窗口的高度
menubar=... 窗口有沒(méi)有菜單，取值yes或no
toolbar=... 窗口有沒(méi)有工具條，取值yes或no
location=... 窗口有沒(méi)有地址欄，取值yes或no
directories=... 窗口有沒(méi)有連接區(qū)，取值yes或no
scrollbars=... 窗口有沒(méi)有滾動(dòng)條，取值yes或no
status=... 窗口有沒(méi)有狀態(tài)欄，取值yes或no
resizable=... 窗口給不給調(diào)整大小，取值yes或no

(2) 在javascript中除了通過(guò)open()方法建立window對(duì)象實(shí)現(xiàn)彈出窗口外，還可以通過(guò)建立對(duì)話(huà)框的方式彈出窗口。
如：
alert(""); //彈出信息提示對(duì)話(huà)框
confirm(""); //彈出信息確認(rèn)對(duì)話(huà)框
prompt(""); //具有交互性質(zhì)的對(duì)話(huà)框

但是，上述實(shí)現(xiàn)的彈出窗口具有的功能較為單一，只能完成較為簡(jiǎn)單的功能。對(duì)于需要在對(duì)話(huà)框中顯示多個(gè)數(shù)據(jù)信息，

甚至是HTML控件就無(wú)能為力了。

(3) 使用模態(tài)對(duì)話(huà)框?qū)崿F(xiàn)復(fù)雜的對(duì)話(huà)框需求
在javascript的內(nèi)建方法中還有一類(lèi)方法可以實(shí)現(xiàn)通過(guò)對(duì)話(huà)框顯示HTML內(nèi)容，
也就是說(shuō)可以通過(guò)創(chuàng)建對(duì)話(huà)框的方式來(lái)完成創(chuàng)建窗口對(duì)象所能完成的功能。
包括創(chuàng)建模態(tài)對(duì)話(huà)框和非模態(tài)對(duì)話(huà)框兩種。

實(shí)現(xiàn)方法為：

//創(chuàng)建模態(tài)你對(duì)話(huà)框
window.showModalDialog(sURL,vArguments,sFeatures)

//創(chuàng)建非模態(tài)對(duì)話(huà)框
window.showModelessDialog(sURL,vArguments,sFeatures)

其區(qū)別在于：

用showModelessDialog()打開(kāi)窗口時(shí)，不必用window.close()去關(guān)閉它，當(dāng)以非模態(tài)方式［IE5］打開(kāi)時(shí)，打開(kāi)對(duì)話(huà)框

的窗口仍可以進(jìn)行其他的操作，即對(duì)話(huà)框不總是最上面的焦點(diǎn)，當(dāng)打開(kāi)它的窗口URL改變時(shí)，它自動(dòng)關(guān)閉。而模態(tài)［IE4］方式的對(duì)話(huà)框始終有焦點(diǎn)（焦點(diǎn)不可移走，直到它關(guān)閉）。模態(tài)對(duì)話(huà)框和打開(kāi)它的窗口相聯(lián)系，因此我們打開(kāi)另外的窗口時(shí)，他們的鏈接關(guān)系依然保存，并且隱藏在活動(dòng)窗口的下面。 showModeDialog()則不然。

參數(shù)說(shuō)明：

sURL：必選參數(shù)，類(lèi)型：字符串。

用來(lái)指定對(duì)話(huà)框要顯示的文檔的URL。

vArguments：可選參數(shù)，類(lèi)型：變體。

用來(lái)向?qū)υ?huà)框傳遞參數(shù)。傳遞的參數(shù)類(lèi)型不限，包括數(shù)組等。對(duì)話(huà)框通過(guò)window.dialogArguments來(lái)取得傳遞進(jìn)來(lái)的參數(shù)。

sFeatures：選參數(shù)，類(lèi)型：字符串。

用來(lái)描述對(duì)話(huà)框的外觀等信息，可以使用以下的一個(gè)或幾個(gè)，用分號(hào)“;”隔開(kāi)。

dialogHeight：對(duì)話(huà)框高度

不小于100px，IE4中dialogHeight和dialogWidth 默認(rèn)的單位是em，而IE5中是px，為方便其見(jiàn)，在定義modal方式的對(duì)話(huà)框時(shí)，用px做單位。

dialogWidth: 對(duì)話(huà)框?qū)挾取?/P>

dialogLeft: 距離桌面左的距離。

dialogTop: 離桌面上的距離。

center: 窗口是否居中

默認(rèn)yes，但仍可以指定高度和寬度,取值范圍{yes | no | 1 | 0 }。

help: 是否顯示幫助按鈕

默認(rèn)yes，取值范圍 {yes | no | 1 | 0 }。

resizable: 是否可被改變大小。

默認(rèn)no，取值范圍 {yes | no | 1 | 0 } ［IE5+］。

status: 是否顯示狀態(tài)欄。

默認(rèn)為yes[ Modeless]或no[Modal]，

取值范圍{yes | no | 1 | 0 } ［IE5+］。

scroll:指明對(duì)話(huà)框是否顯示滾動(dòng)條。

默認(rèn)為yes，取值范圍{ yes | no | 1 | 0 | on | off }。

還有幾個(gè)屬性是用在HTA中的，在一般的網(wǎng)頁(yè)中一般不使用。

dialogHide:在打印或者打印預(yù)覽時(shí)對(duì)話(huà)框是否隱藏。

默認(rèn)為no，取值范圍{ yes | no | 1 | 0 | on | off }。

edge:指明對(duì)話(huà)框的邊框樣式。

默認(rèn)為raised，取值范圍{ sunken | raised }。

unadorned:默認(rèn)為no，取值范圍{ yes | no | 1 | 0 | on | off }。

傳入?yún)?shù)：

要想對(duì)話(huà)框傳遞參數(shù)，是通過(guò)vArguments來(lái)進(jìn)行傳遞的。類(lèi)型不限制，對(duì)于字符串類(lèi)型，最大為4096個(gè)字符。也可以傳遞對(duì)象

例如：

var newWin=window.showModalDialog(url,window,'dialogHeight:500px, dialogLeft:100px, dialogTop:100px,

dialogWidth:300px, status:0, edge:sunken');

newWin.open();

與使用window.open()方法創(chuàng)建窗口相比，模態(tài)方法創(chuàng)建窗口的區(qū)別在于有模態(tài)方法創(chuàng)建的窗口后將不能操作父窗口.

2、子窗口與父窗口間通信

(1) 使用window.open()創(chuàng)建的窗口與父窗口通信
可以在子窗口頁(yè)面中通過(guò)window.opener來(lái)獲取父窗口對(duì)象，獲取之后子窗口便可以對(duì)父窗口執(zhí)行刷新，傳值等操作。
如：
window.opener.location.reload(); //子窗口刷新父窗口
window.opener.location.href //獲取父窗口href
window.opener.locaiton.pathname //獲取父窗口路徑名

//刷新父頁(yè)面
window.location.href=window.location.href ; //重新定位父頁(yè)面
window.location.reload;

(2) 模態(tài)窗口與父窗口通信
通過(guò)使用showModelDialog(),及showModelessDialog（）方法創(chuàng)建的子窗口想與父窗口通信時(shí)，不能通過(guò)window.opener

來(lái)獲取父窗口對(duì)象。要實(shí)現(xiàn)通信，必須在創(chuàng)建模態(tài)子窗口時(shí)向子窗口傳入父窗口對(duì)象。

實(shí)現(xiàn)方式為：

在父窗口中：

var newWin=window.showModelDialog(url,window,'');
newWin.open();

此時(shí)參數(shù)window即是父窗口對(duì)象

在子窗口中：

需首先獲取父窗口對(duì)象，然后才能使用父窗口對(duì)象。由于父窗口對(duì)象是在創(chuàng)建
子窗口時(shí)通過(guò)傳入?yún)?shù)的方式傳入的，因此，在子窗口中也只能通過(guò)獲取窗口參數(shù)的方式獲取父窗口對(duì)象。獲取方式如下：

var parent=widnow.dialogArguments；
變量parent便是父窗口對(duì)象。

例如：

//通過(guò)子窗口提交父窗口中的表單：form1,提交后執(zhí)行查詢(xún)操作
var parent=window.dialogArguments;
parent.document.form1.action="QueryInfor.jsp";
parent.submit();

//刷新父頁(yè)面
var parent=window.dialogArguments;
parent.location.reload();

//從子窗口傳值到父窗口
要實(shí)現(xiàn)在模態(tài)子窗口中傳值到父窗口，需要使用window.returnValue完成

實(shí)現(xiàn)方法如下：

在子窗口中：

//獲取父窗口某字段值，對(duì)該值加一后返回父窗口
var parent=window.dialogArguments;
var x=parent.docuement.getElementById("age").value;
x=x+1；

//傳回x值
window.returnValue=x;

在父窗口中：

//獲取來(lái)自子窗口的值
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null)
document.getElementByIdx_x("age").value=newWin;

//在子窗口中設(shè)置父窗口的值
在子窗口中向父窗口中傳入值似乎沒(méi)有直接設(shè)置父窗口中的值來(lái)得明了。直接設(shè)置父窗口中元素的值顯得要更靈活一些,不過(guò)具體使用哪種方法要根據(jù)實(shí)際情況和已有的實(shí)現(xiàn)方式而定，因?yàn)槿绻褂昧瞬磺袑?shí)際的方法不僅降低開(kāi)發(fā)效率，也降低了執(zhí)行效率，往往也會(huì)造成不優(yōu)雅的實(shí)現(xiàn)方式和代碼風(fēng)格。

子窗口設(shè)置父窗口的值使用方法如下：

子窗口中：

var parent=window.dialogArguments;
var x=parent.document.getElementByIdx_x("age").value;
x=x+1；
//設(shè)置父窗口中age屬性值
parent.document.getElementByIdx_x("age").value=x;

以上是我在項(xiàng)目中使用javascript解決子窗口問(wèn)題時(shí)，收集及積累的一些方法和資料。我是使用建立模態(tài)窗口的方式來(lái)實(shí)現(xiàn)的（這主要與項(xiàng)目本身有關(guān)），不過(guò)其實(shí)不論是使用window.open()還是使用window.showModelDialog()進(jìn)行傳參等操作時(shí)雖然在實(shí)現(xiàn)方法上有很大的差別，初次接觸會(huì)覺(jué)得有點(diǎn)亂，但只要理清子窗口與父窗口之間的關(guān)系和角色之后，就很好理解了。

最新評(píng)論