`

Jquery 获取父类元素

 
阅读更多
$("#父窗口元素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()进行传参等操作时虽然在实现方法上有很大的差别,初次接触会觉得有点乱,但只要理清子窗口与父窗口之间的关系和角色之后,就很好理解了。
分享到:
评论

相关推荐

    jquery、js调用iframe父窗口与子窗口元素的方法整理

    1. **jQuery在iframe子页面获取父页面元素**: 当我们需要在iframe子页面中访问父页面的元素时,可以使用jQuery的`parent.document`来引用父窗口的文档对象。例如,如果我们要获取父页面中ID为"objid"的元素,代码...

    jQuery子窗体取得父窗体元素的方法

    使用jQuery获取父窗体元素的基本语法是: ```javascript $("#父窗口元素ID", window.parent.document); ``` 这里,我们传递两个参数给jQuery函数:第一个参数是需要获取的父窗体元素的ID,第二个参数是父窗体的...

    jquery、js调用iframe父窗口与子窗口元素的方法整理.docx

    1. jquery在iframe子页面获取父页面元素 在jquery中,可以使用以下代码来获取父页面的元素: ``` $("#objid", parent.document) ``` 其中,`parent`是指父窗口的document对象,`objid`是要获取的元素的id。 2. ...

    jquery中表示必须录入项

    6. **jQuery选择器**:虽然题目中没有明确提到jQuery,但文件部分内容可能是在jQuery环境中,因为出现了`$("gv_data")`这样的选择器,这通常是jQuery用来选取DOM元素的方式。 7. **数据绑定**:`InitCategory`函数...

    layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例

    Layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例是指在layer弹出框中,将子层的数据传递到父层页面的方法。这种方法可以在实际开发中发挥重要作用,例如在选择商家时,需要将子层的选择结果传递到父层...

    Java基础及相关jar包和jQuery

    - **选择器**:类似于CSS的选择器语法,用于获取页面中的DOM元素。 - **DOM操作**:如`.html()`、`.append()`等方法可以轻松修改DOM结构。 - **事件处理**:使用`.on()`方法绑定事件处理器。 - **AJAX**:jQuery提供...

    java面试题-基础(1).doc

    通过.css()方法设置或获取元素的样式,如$("#element").css("color", "red"); 2.1.4 事件绑定 JQuery提供了.on()方法来绑定事件,如$("#element").on("click", function() {...}); 2.1.5 集合遍历 使用.each()方法...

    EXT JS 3.0 Core Class Diagram

    - `getRelatedTarget()`, `getTarget()`: 获取事件关联的目标元素和原始目标元素。 - `getTime()`: 获取事件发生的时间戳。 - `getWheelDelta()`: 获取鼠标滚轮事件的滚动量。 - `getXY()`: 获取事件相对于视口...

    Java常见面试题(内含答案)

    例如,获取页面元素的操作,在原生JavaScript中可能需要几行代码,而在jQuery中只需一行即可完成。 #### 二、jQuery与原生JS对象的相互转换 1. **将原生的JS对象转换为jQuery对象**:可以通过在原生JS对象外部添加...

    前端练习题 代码敲烂月薪过万前端练习题 代码敲烂月薪过万.docx

    jquery 对象可以使用 get() 方法转换成原生 DOM 对象,例如:$('div').get(0) 获取原生 dom 元素。 call 和 apply call 和 apply 方法可以改变函数的 this 指向,并可以带入参数,但是它们不能创建函数。 变量作用...

    java基础题

    包括面向对象特性、集合操作效率、字符串比较、Hibernate映射、编码解码、Spring的IoC、方法参数、抽象类和接口、异常处理、final修饰符、finally块、JSP隐含对象、Servlet参数获取、Filter、Struts2参数获取、HTML...

    于笑扬java综合知识点总结-必背.pdf

    方法重写是指子类提供一个与父类相同的方法,方法重载是指多个方法具有相同的名称但不同的参数列表,运算符重载是指对运算符进行重新定义。 StringBuffer StringBuilder String 区别 StringBuffer、StringBuilder ...

    java面试宝典

    110、.BufferedReader的父类是以下哪个? 25 112、div与span区别? 25 113、html的框架是什么? 25 114、alert怎样换行? 25 115、什么情况用HTML控件,什么情况用WEB控件,并比较两者差别 25 javaScript部分 25 116、...

    Java综合笔试题.docx

    抽象类可以有方法实现,可以包含非抽象方法,用于提供通用的父类结构。 3. 构造函数:用于初始化新创建的对象,名字与类名相同,无返回类型。构造函数重载是在同一类中定义多个构造函数,每个函数的参数列表不同。 4...

    jsp中一个页面引入另一个页面的实现代码

    在`jQuery(function() {...})` 中,可以通过下标来获取表格中的值,下标对应于元素在`header` 列表中的位置。 7. **隐藏元素(hidden)**:在JSP中,有时需要使用`&lt;input type="hidden"&gt;` 元素来存储那些不直接在...

    java综合知识点总结-必背.doc

    多态是面向对象的三大特性之一,体现在子类对象可以被视为父类对象,调用父类方法,实现不同子类的差异化行为。例如,接口或抽象类的引用指向具体实现类的对象。 四、StringBuffer、StringBuilder和String的区别 ...

    struts和ajax应用例子

    通常,我们会使用Struts的Action类来处理业务逻辑,然后通过Ajax调用这些Action,获取处理结果,并在客户端动态更新DOM元素,展示新数据。 以下是整合Struts和Ajax的基本步骤: 1. **配置Struts2**:首先,你需要...

    extjs帮助文档

    - **概述**:Ext.DomQuery类提供了一个类似于jQuery的选择器引擎,用于查询DOM元素。 - **常用方法**: - `Ext.DomQuery.select(selector)`:选择符合指定CSS选择器的所有元素。 - `Ext.DomQuery.selectNode...

Global site tag (gtag.js) - Google Analytics