解析jquery擷取父視窗的元素

來源:互聯網
上載者:User

("#父視窗元素ID",window.parent.document); 對應javascript版本為window.parent.document.getElementByIdx_x("父視窗元素ID");

取父視窗的元素方法:$(selector, window.parent.document);
那麼你取父視窗的父視窗的元素就可以用:$(selector, window.parent.parent.document);
類似的,取其它視窗的方法大同小異
$(selector, window.top.document);
$(selector, window.opener.document);
$(selector, window.top.frames[0].document);

-----------------------------------------------------------------------------
子視窗建立及父視窗與子視窗之間通訊:

1、Javascript彈出子視窗
可以通過多種方式實現,下面介紹幾種方法
(1) 通過window對象的open()方法,open()方法將會產生一個新的window視窗對象
其用法為:
window.open(URL,windowName,parameters);
URL: 描述要開啟的視窗的URL地址,如何為空白則不開啟任何網頁;
windowName:描述被開啟的視窗的民稱,可以使用'_top'、'_blank'等內建名稱,這裡的名稱跟<a href="..." target="...">裡的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()方法建立視窗相比,模態方法建立視窗的區別在於有模態方法建立的視窗後將不能操作父視窗.
2、子視窗與父視窗間通訊
(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("age").value=newWin;
//在子視窗中設定父視窗的值
在 子視窗中向父視窗中傳入值似乎沒有直接設定父視窗中的值來得明了。直接設定父視窗中元素的值顯得要更靈活一些,不過具體使用哪種方法要根據實際情況和已有 的實現方式而定,因為如果使用了不切實際的方法不僅降低開發效率,也降低了執行效率,往往也會造成不優雅的實現方式和代碼風格。
子視窗設定父視窗的值使用方法如下:
子視窗中:
var parent=window.dialogArguments;
var x=parent.document.getElementByIdx_x("age").value;
x=x+1;
//設定父視窗中age屬性值
parent.document.getElementByIdx_x("age").value=x;
以 上是我在項目中使用javascript解決子視窗問題時,收集及積累的一些方法和資料。我是使用建立模態視窗的方式來實現的(這主要與項目本身有關), 不過其實不論是使用window.open()還是使用window.showModelDialog()進行傳參等操作時雖然在實現方法上有很大的差 別,初次接觸會覺得有點亂,但只要理清子視窗與父視窗之間的關係和角色之後,就很好理解了。

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。