解析jquery獲取父窗口的元素
("#父窗口元素ID",window.parent.document); 對(duì)應(yīng)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);
-----------------------------------------------------------------------------
子窗口創(chuàng)建及父窗口與子窗口之間通信:
1、Javascript彈出子窗口
可以通過多種方式實(shí)現(xiàn),下面介紹幾種方法
(1) 通過window對(duì)象的open()方法,open()方法將會(huì)產(chǎn)生一個(gè)新的window窗口對(duì)象
其用法為:
window.open(URL,windowName,parameters);
URL: 描述要打開的窗口的URL地址,如何為空則不打開任何網(wǎng)頁(yè);
windowName:描述被打開的窗口的民稱,可以使用'_top'、'_blank'等內(nèi)建名稱,這里的名稱跟<a href="..." target="...">里的target屬性是一樣的。
parameters:描述被打開的窗口的參數(shù)值,或者說是樣貌,其包括窗口的各個(gè)屬性值,及要傳入的參數(shù)值。
例如:
打開一個(gè) 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');
參數(shù)說明如下:
top=# 窗口頂部離開屏幕頂部的像素?cái)?shù)
left=# 窗口左端離開屏幕左端的像素?cái)?shù)
width=# 窗口的寬度
height=# 窗口的高度
menubar=... 窗口有沒有菜單,取值yes或no
toolbar=... 窗口有沒有工具條,取值yes或no
location=... 窗口有沒有地址欄,取值yes或no
directories=... 窗口有沒有連接區(qū),取值yes或no
scrollbars=... 窗口有沒有滾動(dòng)條,取值yes或no
status=... 窗口有沒有狀態(tài)欄,取值yes或no
resizable=... 窗口給不給調(diào)整大小,取值yes或no
(2) 在javascript中除了通過open()方法建立window對(duì)象實(shí)現(xiàn)彈出窗口外,還可以通過建立對(duì)話框的方式彈出窗口。
如:
alert(""); //彈出信息提示對(duì)話框
confirm(""); //彈出信息確認(rèn)對(duì)話框
prompt(""); //具有交互性質(zhì)的對(duì)話框
但是,上述實(shí)現(xiàn)的彈出窗口具有的功能較為單一,只能完成較為簡(jiǎn)單的功能。對(duì)于需要在對(duì)話框中顯示多個(gè)數(shù)據(jù)信息,
甚至是HTML控件就無能為力了。
(3) 使用模態(tài)對(duì)話框?qū)崿F(xiàn)復(fù)雜的對(duì)話框需求
在javascript的內(nèi)建方法中還有一類方法可以實(shí)現(xiàn)通過對(duì)話框顯示HTML內(nèi)容,
也就是說可以通過創(chuàng)建對(duì)話框的方式來完成創(chuàng)建窗口對(duì)象所能完成的功能。
包括創(chuàng)建模態(tài)對(duì)話框和非模態(tài)對(duì)話框兩種。
實(shí)現(xiàn)方法為:
//創(chuàng)建模態(tài)你對(duì)話框
window.showModalDialog(sURL,vArguments,sFeatures)
//創(chuàng)建非模態(tài)對(duì)話框
window.showModelessDialog(sURL,vArguments,sFeatures)
其區(qū)別在于:
用showModelessDialog()打開窗口時(shí),不必用window.close()去關(guān)閉它,當(dāng)以非模態(tài)方式[IE5]打開時(shí), 打開對(duì)話框
的窗口仍可以進(jìn)行其他的操作,即對(duì)話框不總是最上面的焦點(diǎn),當(dāng)打開它的窗口URL改變時(shí),它自動(dòng)關(guān)閉。而模態(tài)[IE4]方式的對(duì)話框始終有焦點(diǎn)(焦點(diǎn)不可移走,直到它關(guān)閉)。模態(tài)對(duì)話框和打開它的窗口相聯(lián)系,因此我們打開另外的窗口時(shí),他們的鏈接關(guān)系依然保存,并且隱藏在活動(dòng)窗口的下面。 showModeDialog()則不然。
參數(shù)說明:
sURL:必選參數(shù),類型:字符串。
用來指定對(duì)話框要顯示的文檔的URL。
vArguments:可選參數(shù),類型:變體。
用來向?qū)υ捒騻鬟f參數(shù)。傳遞的參數(shù)類型不限,包括數(shù)組等。對(duì)話框通過window.dialogArguments來取得傳遞進(jìn)來的參數(shù)。
sFeatures:選參數(shù),類型:字符串。
用來描述對(duì)話框的外觀等信息,可以使用以下的一個(gè)或幾個(gè),用分號(hào)“;”隔開。
dialogHeight:對(duì)話框高度
不小于100px,IE4中dialogHeight和dialogWidth 默認(rèn)的單位是em,而IE5中是px,為方便其見,在定義modal方式的對(duì)話框時(shí),用px做單位。
dialogWidth: 對(duì)話框?qū)挾取?BR>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ì)話框是否顯示滾動(dòng)條。
默認(rèn)為yes,取值范圍{ yes | no | 1 | 0 | on | off }。
還有幾個(gè)屬性是用在HTA中的,在一般的網(wǎng)頁(yè)中一般不使用。
dialogHide:在打印或者打印預(yù)覽時(shí)對(duì)話框是否隱藏。
默認(rèn)為no,取值范圍{ yes | no | 1 | 0 | on | off }。
edge:指明對(duì)話框的邊框樣式。
默認(rèn)為raised,取值范圍{ sunken | raised }。
unadorned:默認(rèn)為no,取值范圍{ yes | no | 1 | 0 | on | off }。
傳入?yún)?shù):
要想對(duì)話框傳遞參數(shù),是通過vArguments來進(jìn)行傳遞的。類型不限制,對(duì)于字符串類型,最大為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è)面中通過window.opener來獲取父窗口對(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)窗口與父窗口通信
通過使用showModelDialog(),及showModelessDialog()方法創(chuàng)建的子窗口想與父窗口通信時(shí),不能通過window.opener
來獲取父窗口對(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í)通過傳入?yún)?shù)的方式傳入的,因此,在子窗口中也只能通過獲取窗口參數(shù)的方式獲取父窗口對(duì)象。獲取方式如下:
var parent=widnow.dialogArguments;
變量parent便是父窗口對(duì)象。
例如:
//通過子窗口提交父窗口中的表單:form1,提交后執(zhí)行查詢操作
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;
在父窗口中:
//獲取來自子窗口的值
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null)
document.getElementByIdx_x("age").value=newWin;
//在子窗口中設(shè)置父窗口的值
在子窗口中向父窗口中傳入值似乎沒有直接設(shè)置父窗口中的值來得明了。直接設(shè)置父窗口中元素的值顯得要更靈活一些,不過具體使用哪種方法要根據(jù)實(shí)際情況和已有的實(shí)現(xiàn)方式而定,因?yàn)槿绻褂昧瞬磺袑?shí)際的方法不僅降低開發(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解決子窗口問題時(shí),收集及積累的一些方法和資料。我是使用建立模態(tài)窗口的方式來實(shí)現(xiàn)的(這主要與項(xiàng)目本身有關(guān)),不過其實(shí)不論是使用window.open()還是使用window.showModelDialog()進(jìn)行傳參等操作時(shí)雖然在實(shí)現(xiàn)方法上有很大的差別,初次接觸會(huì)覺得有點(diǎn)亂,但只要理清子窗口與父窗口之間的關(guān)系和角色之后,就很好理解了。
- jquery、js調(diào)用iframe父窗口與子窗口元素的方法整理
- js 父窗口控制子窗口的行為-打開,關(guān)閉,重定位,回復(fù)
- js操作模態(tài)窗口及父子窗口間相互傳值示例
- JavaScript實(shí)現(xiàn)彈出子窗口并傳值給父窗口
- JavaScript子窗口調(diào)用父窗口變量和函數(shù)的方法
- 用javascript父窗口控制只彈出一個(gè)子窗口
- JavaScript新窗口與子窗口傳值詳解
- js創(chuàng)建子窗口并且回傳值示例代碼
- JS獲取子窗口中返回的數(shù)據(jù)實(shí)現(xiàn)方法
- jquery 子窗口操作父窗口的代碼
- iframe里面的元素觸發(fā)父窗口元素事件的jquery代碼
- JQUERY 獲取IFrame中對(duì)象及獲取其父窗口中對(duì)象示例
- JS與jQuery實(shí)現(xiàn)子窗口獲取父窗口元素值的方法
相關(guān)文章
jQuery簡(jiǎn)單操作cookie的插件實(shí)例
這篇文章主要介紹了jQuery簡(jiǎn)單操作cookie的插件,以實(shí)例形式分析了jQuery操作cookie的插件功能定義與使用技巧,需要的朋友可以參考下2016-01-01jquery3和layui沖突導(dǎo)致使用layui.layer.full彈出全屏iframe窗口時(shí)高度152px問題
這篇文章主要介紹了解決jquery3和layui沖突導(dǎo)致使用layui.layer.full彈出全屏iframe窗口時(shí)高度152px問題,需要的朋友可以參考下2019-05-05jQuery Ajax異步處理Json數(shù)據(jù)詳解
jquery ajax處理json數(shù)據(jù)其實(shí)與其它ajax處理數(shù)據(jù)沒什么很大的改動(dòng),我們只要簡(jiǎn)單處理一下ajax部份的dataType數(shù)據(jù)類型等于json即可解決了2013-11-11自己動(dòng)手制作jquery插件之自動(dòng)添加刪除行功能介紹
這個(gè)插件的上篇訪問量很不好,幾乎是我寫的文章里最少的點(diǎn)擊量的了,不知道是不是因?yàn)榇蠹覍?duì)我說的這個(gè)插件不感興趣還是說我寫的東西技術(shù)含量太差了,呵,那我只能孤芳自賞了2011-10-10jquery zTree異步加載簡(jiǎn)單實(shí)例講解
這篇文章主要為大家詳細(xì)介紹了jquery zTree異步加載簡(jiǎn)單實(shí)例,ztree采用了延遲加載技術(shù),上萬(wàn)節(jié)點(diǎn)輕松加載,即使在 IE6 下也能基本做到秒殺,感興趣的小伙伴們可以參考一下2016-02-02使用jQuery將多條數(shù)據(jù)插入模態(tài)框的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用jQuery將多條數(shù)據(jù)插入模態(tài)框的方法,很簡(jiǎn)單,很實(shí)用,需要的朋友可以參考下2014-10-10jquery對(duì)table做排序操作的實(shí)例演示
這篇文章主要介紹了jquery對(duì)table做排序操作的實(shí)例演示,通過添加自定義屬性data-sort-field-ftime及表頭添加onchange事件詳細(xì)講解了操作過程,需要的朋友可以參考下2017-08-08jQuery中noConflict()用法實(shí)例分析
這篇文章主要介紹了jQuery中noConflict()用法,實(shí)例分析了noConflict()的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下2015-02-02jQuery代碼實(shí)現(xiàn)對(duì)話框右上角菜單帶關(guān)閉×
這篇文章主要介紹了jQuery代碼實(shí)現(xiàn)對(duì)話框右上角菜單帶關(guān)閉× 的相關(guān)資料,需要的朋友可以參考下2016-05-05jQuery的Ajax的自動(dòng)完成功能控件簡(jiǎn)要說明
jQuery的Ajax的自動(dòng)完成功能 允許您輕松地創(chuàng)建自動(dòng)完成/自動(dòng)提示框的文本輸入字段;如果沒有特定查詢的結(jié)果,它停止發(fā)送請(qǐng)求到服務(wù)器的其他查詢感興趣的朋友可以參考下啊2013-02-02