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()則不然。

相關文章

聯繫我們

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

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.