`

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

相关推荐

    JS与jQuery实现子窗口获取父窗口元素值的方法

    本文将详细介绍如何使用JavaScript(简称JS)与jQuery来实现子窗口获取父窗口中元素值的功能。 ### JS实现子窗口获取父窗口元素值的方法 在JavaScript中,可以通过`window.opener`属性访问打开当前窗口的那个窗口...

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

    jquery、js调用iframe父窗口与子窗口元素的方法整理 在Web开发中,iframe是一个常用的技术,用于在一个HTML文档中嵌入另一个HTML文档。然而,在使用iframe时,经常会遇到一个问题:如何在iframe中访问父窗口的元素...

    js与jQuery 获取父窗、子窗的iframe.docx

    ### JavaScript与jQuery获取父窗口与子窗口中的iframe详解 #### 一、引言 在Web开发过程中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在网页中嵌入另一个HTML文档。它允许开发者在一个页面中展示多个...

    解析jquery获取父窗口的元素

    ### jQuery获取父窗口的元素知识点 在Web开发中,窗口之间的交互是常见需求,尤其是在处理iframe或是多个窗口并行操作时。使用jQuery可以简化很多操作,包括获取父窗口元素的流程。 #### 1. 获取父窗口元素的方法 ...

    子窗口与父窗口刷新

    在Java Web开发中,"子窗口与父窗口刷新"是一个常见的交互场景,特别是在构建多层级界面或模态对话框时。这里的"子窗口"通常指的是弹出的窗口、框架或者iframe,而"父窗口"则是打开子窗口的那个主页面。在这样的场景...

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

    以上就是jQuery和JavaScript调用iframe父窗口与子窗口元素的方法。在实际应用中,要注意跨域问题,如果父页面和iframe的源不同,它们之间的交互可能会受到浏览器同源策略的限制。此外,确保正确引用jQuery库,并且在...

    子窗口刷新父窗口总结

    本文档将深入探讨如何在子窗口关闭时刷新父窗口,包括使用`window.open()`、`window.showModalDialog()`以及jQuery进行操作的方法。 #### 一、使用`window.open()`刷新父窗口 `window.open()`方法用于创建一个新的...

    jquery父子窗口互相获取元素demo

    1. **在父窗口中操作子窗口元素:** 在父窗口中,我们可以通过`window.open`返回的引用来调用子窗口的`window`对象的方法。例如,假设子窗口有一个ID为`childElement`的元素,我们可以在父窗口中这样操作它: ```...

    jquery 子窗口操作父窗口的代码

    ### jQuery 子窗口操作父窗口的知识点 #### 1. 理解子窗口与父窗口的概念 在网页开发中,经常会遇到一个页面(主页面)打开另一个页面(子页面)的情况。通常,主页面被称为“父窗口”,而被打开的新页面则被称为...

    js与jQuery 获取父窗、子窗的iframe

    **JavaScript 获取父窗口与子窗的iframe元素** 1. **在父窗口中获取iframe内的元素**: 使用`window.frames`对象可以访问`iframe`,它是一个命名或索引的集合,包含了所有同源的`iframe`。一旦获取到`iframe`,...

    js中用open方式打开新窗口向父窗口传值

    首先,在父窗口中,我们使用`window.open()`方法打开一个新的子窗口,该方法将返回一个新的窗口对象,我们可以使用该对象来访问子窗口中的元素。例如,我们可以使用`window.opener`属性来访问父窗口中的元素。 在子...

    jsp与javascript配合,父窗口与子窗口之间刷新

    本示例探讨的是如何将JSP与JavaScript结合,实现父窗口与子窗口之间的数据通信及页面刷新功能,特别涉及了Ajax查询数据和表格渲染。以下是关于这些知识点的详细解释: 1. **JSP(JavaServer Pages)**:JSP是一种...

    子父窗口传值

    - URL参数:父窗口在打开子窗口时,可以通过URL携带参数,子窗口通过解析URL获取这些参数。 - `window.parent`:子窗口可以通过`window.parent`访问父窗口的对象,调用其方法或修改变量来接收数据。 - 事件触发:...

    html 模态窗口子窗体调用父窗体的任何函数

    模态子窗口通常由JavaScript或者jQuery库(如Bootstrap)创建,它们可以通过事件监听或回调函数与父窗口进行通信。在HTML中,模态窗口往往被包含在一个`&lt;div&gt;`元素中,通过CSS设置为不可见,并在需要时通过...

    JS子父窗口互相操作取值赋值的方法介绍

    当我们需要在子窗口中访问父窗口的元素时,可以使用jQuery的选择器加上window.parent.document的组合方式。例如,如果我们想要获取父窗口中ID为“父窗口元素ID”的元素,我们可以使用如下代码: ```javascript $("#...

    JQUERY 获取IFrame中对象及获取其父窗口中对象示例

    总的来说,当我们在父窗口中操作iframe元素或者在iframe中操作父窗口元素时,关键点在于正确地获取对方的文档对象,然后再利用jQuery的方法对DOM进行操作。通过上述方法,我们可以灵活地在父子窗口之间进行元素的...

    jquery实现父元素大小改变插件:jquery-resize

    《jQuery实现父元素大小改变插件:jQuery-resize深度解析》 在Web开发中,响应式设计已经成为一种标准,使得网站能够适应不同设备的屏幕尺寸。为了实现这一目标,开发者们常常需要监听元素的尺寸变化,以便在尺寸...

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

    本文实例讲述了jQuery子窗体取得父窗体元素的方法。分享给大家供大家参考。具体如下: $(#父窗口元素ID,window.parent.document); 对应javascript版本为 window.parent.document.getElementById(父窗口元素ID); 取...

Global site tag (gtag.js) - Google Analytics