jquery 获取父窗口的元素、父窗口、子窗口
一、获取父窗口元素:
$("#父窗口元素ID",window.parent.document);对应javascript版本为window.parent.document.getElementById("父窗口元素ID");
取父窗口的元素方法:$(selector, window.parent.document);
那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);
类似的,取其它窗口的方法大同小异
$(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'等内建名称,这里的名称跟<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()方法创建窗口相比,模态方法创建窗口的区别在于有模态方法创建的窗口后将不能操作父窗口。
三、子窗口与父窗口间通信:
(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来获取父窗口对象。
要实现通信,必须在创建模态子窗口时向子窗口传入父窗口对象。
(一)实现方式为:
1、在父窗口中:
var newWin=window.showModelDialog(url,window,'');
newWin.open();
此时参数window即是父窗口对象
2、在子窗口中:
需首先获取父窗口对象,然后才能使用父窗口对象。由于父窗口对象是在创建子窗口时通过传入参数的方式传入的,因此,在子窗口中也只能通过获取窗口参数的方式获取父窗口对象。获取方式如下:
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完成
(二)实现方法如下:
1、在子窗口中:
//获取父窗口某字段值,对该值加一后返回父窗口 var parent=window.dialogArguments;//获取父窗口对象 var x=parent.docuement.getElementById("age").value; x=x+1;//传回x值 window.returnValue=x;
2、在父窗口中:
//获取来自子窗口的值 var newWin=window.showModelDialog(url,window,''); if(newWin!=null){document.getElementById("age").value=newWin; }
(三)在子窗口中设置父窗口的值
在子窗口中向父窗口中传入值似乎没有直接设置父窗口中的值来得明了。直接设置父窗口中元素的值显得要更灵活一些,不过具体使用哪种方法要根据实际情况和已有的实现方式而定,因为如果使用了不切实际的方法不仅降低开发效率,也降低了执行效率,往往也会造成不优雅的实现方式和代码风格。
子窗口设置父窗口的值使用方法如下:
1、子窗口中:
var parent=window.dialogArguments; var x=parent.document.getElementById("age").value; x=x+1;
2、设置父窗口中age属性值
parent.document.getElementById("age").value=x;
以上是我在项目中使用javascript解决子窗口问题时,收集及积累的一些方法和资料。其实不论是使用window.open()还是使用window.showModelDialog()进行传参等操作时,虽然在实现方法上有很大的差别,初次接触会觉得有点乱,但只要理清子窗口与父窗口之间的关系和角色之后,就很好理解了。
转载于:https://www.cnblogs.com/goloving/p/7642381.html
jquery 获取父窗口的元素、父窗口、子窗口相关推荐
- qt如何把父窗口的变量传给子窗口_父窗口和iframe子窗口之间相互传递参数和调用函数或方法...
1.父窗口向子窗口传递参数: 可以在url中添加参数:2.html?a=1&b=2&c=3 然后在子页面上可用js解析,提供一个函数: function getQueryStr(sAr ...
- Python tkinter多窗口的交互问题:子窗口无法获取数据
Python tkinter多窗口的交互问题:子窗口无法获取数据 tkinter第二个.第三个子窗口数据不能交互响应的解决方法 先说结论:第二个.第三个子窗口生成时,不能用tk.Tk(),而应改为tk ...
- JQuery获取第几个元素和判断元素在第几个
HTML代码: <ul><li>jQuery判断当前元素是第几个元素示例</li><li>jQuery获取第N个元素示例</li><l ...
- VC实现顶层窗口的透明与实现子窗口的透明【重点:子窗口透明处理】
本人在vc开发过程中,多次因窗口透明而煞费苦心,在本人的前一文章<UpdateLayeredWindow与SetLayeredWindowAttributes>中已经指明实现窗口的透明方法 ...
- C# WINFORM 主窗口把数据传给子窗口,编辑后再返回主窗口
主窗口有数据(listview控件)要传递给子窗口,在子窗口中用户编辑修改数据后,更新回主窗口,比如下面的场景: 主窗口中的代码,创建子窗口实例的时候,直接把主窗口的listview控件传入: pri ...
- Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法
在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:win ...
- qt如何把父窗口的变量传给子窗口_子窗体显示的时候怎么让父窗体阻塞并且子窗体可以任意移动?...
我再使用中文回复一下吧, 毕竟在中文论坛里面: 首先,窗体的显示分为两种模式,非模态和模态. 您的需求就属于模态显示. 子窗体显示在父窗体上面,阻塞父窗体的行为. 当您查看Qt的帮助文档的时候,您就会 ...
- jq 如何获取和当然元素相同类名的标签_jquery获取兄弟元素-jquery获取下一个兄弟元素-jquery获取最后一个兄弟元素...
jquery怎幺获取当前元素的兄弟元素 可以使用 siblings() jquery既然有next方法取得下一个元素,那幺有previous方法吗 $("#id").prev(); ...
- Jquery获取iframe中的元素
2019独角兽企业重金招聘Python工程师标准>>> iframe与父页面之间相互获取元素的方法: 1.从父页面中获取iframe页面中的元素: 用法: $(window.fram ...
- jquery 控制frameset frame节点内容(在子窗口中把该窗口中的焦点处的text内容填
2019独角兽企业重金招聘Python工程师标准>>> 现在做这个项目中,有一项把:在子窗口中把该窗口中的焦点处的text内容填入其它子窗口的input内,也就是改写input的va ...
最新文章
- Asp.net 文件上传的 FileUpload FileName 和 FileUpload PostedFile.FileName的细节问题
- 服务器windows模拟linux环境,科学网—Windows不用虚拟机或双系统,轻松实现shell环境:gitforwindows - 刘永鑫的博文...
- 隐藏/显示jeecg-boot 后端管理页面的右侧的系统设置
- MapReduce编程实践之自定义数据类型
- ccsa安学网小程序_【大检修】“CCSA安学网”掀起指尖上的学习热潮,助力1#大检修...
- jquery插件整理篇(六)HTML编辑器插件
- php 图像居中裁剪函数,PHP 实现的自定义图像居中裁剪函数示例
- systemback慎用:安装后无法启动
- 互联网软件开发和传统软件开发的不同(转型互联网开发需要适应的那些事)
- 前端可视化大屏适配方案
- PIC单片机学习笔记——PIC16F(L)1526/7
- 初学01-夜神模拟器连接Android Studio
- Linux Kernel suspend/resume 过程
- Excel文档误删的4种恢复方法,1秒就可以还原所有内容,你用过吗
- 区块链技术培训—从技术小白到年薪百万区块链工程师的进阶之路
- 微信应用号(小程序)开发IDE配置
- 列表ul li前面的点如何更改颜色、形状、大小
- JAVA中excel文件导入日期变成数字解决方案
- DataCamp课程 <Tidyverse> Chapter.3 分组和概括
- win7最适合的杀毒软件(电脑适合用什么杀毒软件)
热门文章
- 可通过http获取远端服务信息_(二)NebuLogMvcSample如何获取应用日志并定制输出...
- 课程《设计模式之美》笔记之关于面向对象与面向过程
- [USACO19FEB]Cow Dating——找规律
- 力扣——查找常用字符
- oracle监控资源管理器
- 设计模式12——代理模式
- Java对象toString()方法
- 伪装Apache版本防止入侵Web服务器
- [转][中文/英文]VC6 sp6补丁下载|VS6 sp6补丁下载 [防VC6卡死]
- 使用CSS创建Digg样式风格的导航栏或菜单