jquery獲取父窗口的元素

jquery獲取父窗口的元素

 

 

取父窗口的元素方法：$(selector, window.parent.document); 
取父窗口的元素方法：$(selector, parent.document); 
那麼你取父窗口的父窗口的元素就能夠用：$(selector, window.parent.parent.document);
相似的，取其它窗口的方法大同小異
$(selector, window.top.document);
$(selector, window.opener.document);
$(selector, window.top.frames[0].document);

 

背景： 

子頁面元素是include進來的,在子頁面元素須要獲取父頁面的元素作一些操做.. 

jquery提供了一個很好的方法 

$("#父頁面元素id" , parent.document)  
一樣適用於iframe 


背景： 

子頁面元素是include進來的,在父頁面元素須要獲取子頁面的元素作一些操做.. 

方法： 

$('#子頁面元素').contents().find('#須要找的子頁面元素').addClass('on'); 

注：#子頁面元素需包含#須要找的子頁面元素 

同級frame間互相操做 
$(self.parent.frames["frame2"].document).find('xx'); 

 

 

$("#父窗口元素ID",window.parent.document).find("#man_id").val(); 對應javascript版本爲window.parent.document.getElementByIdx_x("父窗口元素ID").value；

$(window.parent.frames["mainFrame"].document).find("#man_id").val(); 

 

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

 

上述代碼是針對frameset框架的，在frameset框架中parent表示上一級，top表示最頂級。

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

 

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

子窗口建立及父窗口與子窗口之間通訊：

 

一、Javascript彈出子窗口

能夠經過多種方式實現，下面介紹幾種方法

(1) 經過window對象的open()方法，open()方法將會產生一個新的window窗口對象

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

URL: 描述要打開的窗口的URL地址，如何爲空則不打開任何網頁；

windowName:描述被打開的窗口的民稱，可使用'_top'、'_blank'等內建名稱，這裏的名稱跟裏的target屬性是同樣的。

parameters:描述被打開的窗口的參數值，或者說是樣貌，其包括窗口的各個屬性值，及要傳入的參數值。

例如：

打開一個 400 x 100 的乾淨的窗口：
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')

也能夠這樣寫： var newWindow = open('','_blank');

參數說明以下：

top=# 窗口頂部離開屏幕頂部的像素數
left=# 窗口左端離開屏幕左端的像素數
width=# 窗口的寬度
height=# 窗口的高度
menubar=... 窗口有沒有菜單，取值yes或no
toolbar=... 窗口有沒有工具條，取值yes或no
location=... 窗口有沒有地址欄，取值yes或no
directories=... 窗口有沒有鏈接區，取值yes或no
scrollbars=... 窗口有沒有滾動條，取值yes或no
status=... 窗口有沒有狀態欄，取值yes或no
resizable=... 窗口給不給調整大小，取值yes或no


(2) 在javascript中除了經過open()方法創建window對象實現彈出窗口外，還能夠經過創建對話框的方式彈出窗口。
如：
alert(""); //彈出信息提示對話框
confirm(""); //彈出信息確認對話框
prompt(""); //具備交互性質的對話框

可是，上述實現的彈出窗口具備的功能較爲單一，只能完成較爲簡單的功能。對於須要在對話框中顯示多個數據信息，

甚至是HTML控件就無能爲力了。

(3) 使用模態對話框實現複雜的對話框需求
在javascript的內建方法中還有一類方法能夠實現經過對話框顯示HTML內容，
也就是說能夠經過建立對話框的方式來完成建立窗口對象所能完成的功能。
包括建立模態對話框和非模態對話框兩種。

實現方法爲：

//建立模態你對話框
window.showModalDialog(sURL,vArguments,sFeatures)


//建立非模態對話框
window.showModelessDialog(sURL,vArguments,sFeatures)

其區別在於：

用showModelessDialog()打開窗口時，沒必要用window.close()去關閉它，當以非模態方式［IE5］打開時，打開對話框

的窗口仍能夠進行其餘的操做，即對話框不老是最上面的焦點，當打開它的窗口URL改變時，它自動關閉。而模態［IE4］方式的對話框始終有焦點（焦點不可移走，直到它關閉）。模態對話框和打開它的窗口相聯繫，所以咱們打開另外的窗口時，他們的連接關係依然保存，而且隱藏在活動窗口的下面。 showModeDialog()則否則。

參數說明：

sURL：必選參數，類型：字符串。

用來指定對話框要顯示的文檔的URL。

vArguments：可選參數，類型：變體。

用來向對話框傳遞參數。傳遞的參數類型不限，包括數組等。對話框經過window.dialogArguments來取得傳遞進來的參數。

sFeatures：選參數，類型：字符串。

用來描述對話框的外觀等信息，可使用如下的一個或幾個，用分號「;」隔開。

dialogHeight：對話框高度

不小於100px，IE4中dialogHeight和dialogWidth 默認的單位是em，而IE5中是px，爲方便其見，在定義modal方式的對話框時，用px作單位。
　　
dialogWidth: 對話框寬度。
　
dialogLeft: 距離桌面左的距離。
　　
dialogTop: 離桌面上的距離。
　
center: 窗口是否居中

默認yes，但仍能夠指定高度和寬度,取值範圍{yes | no | 1 | 0 }。
　　
help: 是否顯示幫助按鈕

默認yes，取值範圍 {yes | no | 1 | 0 }。

　resizable: 是否可被改變大小。

默認no，取值範圍 {yes | no | 1 | 0 } ［IE5+］。

　status: 是否顯示狀態欄。

默認爲yes[ Modeless]或no[Modal]，

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

scroll:指明對話框是否顯示滾動條。

默認爲yes，取值範圍{ yes | no | 1 | 0 | on | off }。

還有幾個屬性是用在HTA中的，在通常的網頁中通常不使用。

dialogHide:在打印或者打印預覽時對話框是否隱藏。

默認爲no，取值範圍{ yes | no | 1 | 0 | on | off }。

edge:指明對話框的邊框樣式。

默認爲raised，取值範圍{ sunken | raised }。

unadorned:默認爲no，取值範圍{ yes | no | 1 | 0 | on | off }。

傳入參數：

要想對話框傳遞參數，是經過vArguments來進行傳遞的。類型不限制，對於字符串類型，最大爲4096個字符。也能夠傳遞對象

例如：

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

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

newWin.open();

與使用window.open()方法建立窗口相比，模態方法建立窗口的區別在於有模態方法建立的窗口後將不能操做父窗口.


二、子窗口與父窗口間通訊

(1) 使用window.open()建立的窗口與父窗口通訊
能夠在子窗口頁面中經過window.opener來獲取父窗口對象，獲取以後子窗口即可以對父窗口執行刷新，傳值等操做。
如：
window.opener.location.reload(); //子窗口刷新父窗口
window.opener.location.href //獲取父窗口href
window.opener.locaiton.pathname //獲取父窗口路徑名

//刷新父頁面
window.location.href=window.location.href ; //從新定位父頁面
window.location.reload;


(2) 模態窗口與父窗口通訊
經過使用showModelDialog(),及showModelessDialog（）方法建立的子窗口想與父窗口通訊時，不能經過window.opener

來獲取父窗口對象。要實現通訊，必須在建立模態子窗口時向子窗口傳入父窗口對象。

實現方式爲：

在父窗口中：

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

此時參數window便是父窗口對象

在子窗口中：

需首先獲取父窗口對象，而後才能使用父窗口對象。因爲父窗口對象是在建立
子窗口時經過傳入參數的方式傳入的，所以，在子窗口中也只能經過獲取窗口參數的方式獲取父窗口對象。獲取方式以下

：

var parent=widnow.dialogArguments；
變量parent即是父窗口對象。

例如：

//經過子窗口提交父窗口中的表單：form1,提交後執行查詢操做
var parent=window.dialogArguments;
parent.document.form1.action="QueryInfor.jsp";
parent.submit();

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

//從子窗口傳值到父窗口
要實如今模態子窗口中傳值到父窗口，須要使用window.returnValue完成

實現方法以下：

在子窗口中：

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

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

在父窗口中：

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

//在子窗口中設置父窗口的值
在子窗口中向父窗口中傳入值彷佛沒有直接設置父窗口中的值來得明瞭。直接設置父窗口中元素的值顯得要更靈活一些,不過具體使用哪一種方法要根據實際狀況和已有的實現方式而定，由於若是使用了不切實際的方法不只下降開發效率，也下降了執行效率，每每也會形成不優雅的實現方式和代碼風格。

子窗口設置父窗口的值使用方法以下：

子窗口中：

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

以上是我在項目中使用javascript解決子窗口問題時，收集及積累的一些方法和資料。我是使用創建模態窗口的方式來實現的（這主要與項目自己有關），不過其實不管是使用window.open()仍是使用window.showModelDialog()進行傳參等操做時雖然在實現方法上有很大的差異，初次接觸會以爲有點亂，但只要理清子窗口與父窗口之間的關係和角色以後，就很好理解了。