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()进行传参等操做时虽然在实现方法上有很大的差异，初次接触会以为有点乱，但只要理清子窗口与父窗口之间的关系和角色以后，就很好理解了。