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


Posted in Javascript onMay 11, 2013

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

Javascript 相关文章推荐
JQuery从头学起第三讲
Jul 06 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
js运动框架_包括图片的淡入淡出效果
May 11 #Javascript
jQuery判断iframe中元素是否存在的方法
May 11 #Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 #Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 #Javascript
解析javascript 实用函数的使用详解
May 10 #Javascript
jQuery拖动图片删除示例
May 10 #Javascript
jquery 提交值不为空的元素示例代码
May 10 #Javascript
You might like
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
理解Python中函数的参数
2015/04/27 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python算的上脚本语言吗
2020/06/22 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
资源环境与城市管理专业推荐信
2013/11/30 职场文书
食品安全演讲稿
2014/09/01 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
追讨欠款律师函
2015/06/24 职场文书
2015中学学校工作总结
2015/07/20 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
2016春季运动会前导词
2015/11/25 职场文书