jquery获取父窗口的元素-程序员宅基地

技术标签: 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解决子窗口
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Dracotianlong/article/details/8727526

智能推荐

pythonrandom随机数的用法,python中random随机数用法[python培训]_一朵云从平流层坠下的博客-程序员宅基地

random模块是python自带的模块,用于生成随机数,需要注意的是random()是不能直接访问的,需要导入 random 模块,然后通过 random 静态对象调用该方法。下面我们介绍常用的random方法。# 导入工具包import random# 产生1到10的一个整数型随机数print(random.randint(1, 10))# 产生0到1之间的随机浮点数print(random....

FTP协议中的RETR和STOR命令_ftp stor-程序员宅基地

RETR和STOR命令是FTP协议中的下载和上传命令, 可以针对文件和目录. 下边就下载和上传单个文件, 将在Telnet中测试的心得描述如下:一. 下载文件客户端命令序列:开一个Telnet窗口(称为"控制窗口"), telnet 127.0.0.1 21 (连接FTP Server, 这里我用的是Wing FTP Server 3.4.1 30天测试版) ---> user anonymous (匿名登录) ---> pass <空格> (匿名登录无密码) ---&g_ftp stor

MyCat整理-程序员宅基地

用于数据库集群抽象了一个逻辑层的数据库,实现分库、分表、读写分离、主从复制等操作具体的数据由实际的物理数据库支撑参考:https://www.jianshu.com/p/c8973edc550a

线程按需交替-程序员宅基地

编写一个程序,开启 3 个线程,这三个线程的 ID 分别为 A、B、C,每个线程将自己的 ID 在屏幕上打印 20遍,要求输出的结果必须按顺序显示。如:ABCABCABC…… 依次递归分析:为A,B,C三类线程创建三个方法,方法保证每一遍执行的效果为“ABC”;设置一个当前正在执行线程的标记;使用Condition保证各个线程通信执行效果:代码实现class Alternat..._线程按需交替

Vue入门——Vue-CLI 4.X脚手架搭建_安装4.x版本的vue脚手架-程序员宅基地

Vue入门——Vue-CLI 4.X脚手架搭建0.前言Vue CLI官方文档Vue CLI是一个基于Vue.js进行快速开发的完整系统。1.下载node.jsVue CLI需要Node.js 8.9或更高版本(推荐8.11.0+)我之前搭建hexo博客下载过了,查看node版本:node -v2.安装Vue CLIcnpm install -g @Vue/cli查看Vu..._安装4.x版本的vue脚手架

Mac OS CentOS下 dd命令行创建系统USB安装盘-程序员宅基地

百度说Mac自带工具disk utility可以搞,但是不知道为什么我打开就是这个样子的,没找到有什么刻录的字样。下面用命令行来刻录一个USB安装盘,系统镜像为CentOS7,已经从官网下载好了。1. 插入usb,看看USB的分区,我的是个FAT的,16G大小# diskutil list/dev/disk0 (internal, physical): #:

随便推点

MapReduce 实现对时间的简单排序_mapreduce将时间戳按升序进行排序-程序员宅基地

MapReduce 实现对时间的简单排序首先 MapReduce在处理数据的过程中会对数据排序(map输出的kv对传输到reduce之前会排序),排序的依据是map输出的key。因此如果要改变排序规则,就要将key位置的值进行修改,具体可以输入一个继承了writablecomparable接口的bean对象下面为实例代码MyValueWritable.javapackage mywo..._mapreduce将时间戳按升序进行排序

多线程内使用GetDC的注意问题_一直getdc 很卡-程序员宅基地

这两天终于解决了一个困扰已久的问题,之前程序一直有资源泄露的问题,本来在GetDC后正常应该ReleaseDC的,但是在线程内的函数DrawDib(BYTE* pData)里面GetDC后ReleaseDC后就根本不显示东西正确的写法是在调用绘制函数之前GetDC,再将DC传到函数内,之后再ReleaseDCCDC* pDC = pThis-&gt;GetDC();pThis-&gt;D..._一直getdc 很卡

CentOS7.0环境下MySQL5.6.34安装教程-程序员宅基地

5.6.34的安装包是从MySQL官网下载的rpm包,文件名如下:MySQL-5.6.34-1.el7.x86_64.rpm-bundle.tar,这个就不做过多的解释了,需要的可以自行从官网下载。关于检测包冲突和解压包之类的在这里就不做详细介绍,可以参考我之前写的一篇博客《Linux RedHat6.x MySQL 5.7.9 安装笔记(史上最全)》,还需要说明的一点是CentOS7自带

shell 脚本中逐行读取文件-程序员宅基地

为什么80%的码农都做不了架构师?>>> ..._shell脚本 read line 为什么一行变多行

【无标题】_geek 博客园_小简(JanYork)的博客-程序员宅基地

博客园还能美化?我的博客在之前,我一直以为博客园他是那种万年不变的老旧风格,看着就有一种年代感,但是,昨天我莫名看到一个项目,我尝试进行了美化后,发现这玩意很好看啊。如果不看域名,还真看不出这是博客园。可以预览一下我的博客园,美化后好看很多。JanYork(小简) - 博客园 (cnblogs.com)如何美化?那么我们怎么样可以美化呢?我来细说一下。这个项目叫**awescnb**,我Fork到了文档仓库,有兴趣开发主体的可以看看。Github:AWESCN._geek 博客园