jQuery 获取父窗口的元素 父窗口 子窗口(iframe)
$("#父窗口元素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);
CLASS:
$(window.parent.document).find(".className").text("123");
EX:
$(window.parent.document).find(".zzfw-box ul li[class='zzfw-insurance out']").text("123");
--------------------------------------------------------------------------------------------------
子窗口创建及父窗口与子窗口之间通信:
可以通过多种方式实现,下面介绍几种方法
(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 获取父窗口的元素 父窗口 子窗口(iframe)的更多相关文章
- jquery 获取父窗口的元素 父窗口 子窗口
一.获取页面元素 取父窗口的元素方法:$(selector, window.parent.document); 那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent ...
- JavaScript、jQuery获取页面及个元素高度、宽度
Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.client ...
- JQuery获取与设置HTML元素的值value
JQuery获取与设置HTML元素的值value 作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查 ...
- JQuery获取第几个元素和判断元素在第几个
HTML代码: <ul> <li>jQuery判断当前元素是第几个元素示例</li> <li>jQuery获取第N个元素示例</li> &l ...
- jQuery获取动态添加的元素,live和on的区别
今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在 ...
- window.open 打开子窗口,关闭所有的子窗口
需求:通过window.open方法打开了子窗口,当关闭主窗口时,子窗口应当也关闭. 实现思路: 1.打开子窗口函数window.open(url,winName)的第二个参数winName可以唯一标 ...
- JS和jQuery获取节点的兄弟,父级,子级元素
原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的 ...
- jquery获取html中当前元素对象,以及父对象,相邻的上一个对象,或下一个对象
jsp代码: <span><input type="hidden" value="1" id="newInfo">& ...
- fancybox 关闭弹出窗口 parent.$.fancybox.close(); 无反应 fancybox 关闭弹出窗口父页面自动刷新,弹出子窗口前后事件
当我们在父页面使用 fancybox 弹出窗口后,如果想自己手动关闭,则可以 function Cancel() { parent.$.fancybox.close(); } 如果关闭没有反应,最好看 ...
随机推荐
- go文件操作大全
参考Go官方库的文件操作分散在多个包中,比如os.ioutil包,我本来想写一篇总结性的Go文件操作的文章,却发现已经有人2015年已经写了一篇这样的文章,写的非常好,所以我翻译成了中文,强烈推荐你阅 ...
- zabbix3.0.4 部署之二 (Centos6.5系统准备)
1.安装Centos6.5 2.6.32-642.4.2.el6.x86_64 升级所有软件至最新: yum update 2.同步时间.安装ntpd yum install ntpddate n ...
- abstract class和interface有什么区别?
1. 接口 只可以定义static final成员变量. 即使不显性写出来 也还是会是static final 2. 接口的 方法不能有方法体,并且只能是public的. 1.抽象类:如果类中有一 ...
- 【nginx】利用yum源安装nginx
先安装nginx的yum源 http://nginx.org/en/linux_packages.html#stable 找到链接,安装: rpm -ivh http://nginx.org/pack ...
- python中requests
#发送无参数的get请求import requests def get_html(url): res = requests.get(url) return res.text #发送无参数的post请求 ...
- WinForm程序打包说明
如果使用的是VS2013需要下载并安装 Microsoft Visual Studio 2013 Installer Projects 下载地址:https://visualstudiogallery ...
- 各种边缘检测算子特点比较(canny)
canny 最好.但是容易把噪点误判为边界.sobel prewitt log 效果差不多.prewitt比sobel 去噪效果好.roberts马马虎虎.适合什么图片那得看图片的噪点情况,一般can ...
- 跟着视频做的SSH项目总结
一直没做过SSH(Struts2+Spring+Hibernate)的实际项目,只是三个框架学的还熟练,但整合起来使用就不知道了.所以前段时间在网上找了一套SSH实际项目的视频来学习(确切的说是买的. ...
- F2工作流引擎模型
工作流引擎(Workflow Engine ) [编辑] 工作流引擎概述 工作流引擎是指workflow(工作流)作为应用系统的一部分,并为之提供对各应用系统有决定作用的根据角色.分工和条件的不同决定 ...
- [转] 深入探讨C++中的引用
引用是C++引入的新语言特性,是C++常用的一个重要内容之一,正确.灵活地使用引用,可以使程序简洁.高效.我在工作中发现,许多人使用它仅仅是想当然,在某些微妙的场合,很容易出错,究其原由,大多因为没有 ...