首頁 >web前端 >js教程 >解析jquery取得父視窗的元素_jquery

解析jquery取得父視窗的元素_jquery

WBOY
WBOY原創
2016-05-16 17:31:12886瀏覽

("#父窗口元素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'等内建名称,这里的名称跟里的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,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()進行傳參等操作時雖然在實作方法上有很大的差別,初次接觸會覺得有點亂,但只要理清子窗口與父窗口之間的關係和角色之後,就很好理解了。