JavaScript子窗口ModalDialog中操作父窗口对像


Posted in Javascript onDecember 11, 2012

在ModalDialog中操作父窗口对象
1、不能使用window.parent
Window.parent是用来在frame中进行操作的,在对话框中不能用来操作父窗口对象

2、正确的做法
调用modaldialog时通过传参数的方式操作
例:
需求
父窗口页面为a.html 子窗口页面为b.html。a.html中有文本框id为test1,在打开的对话框中点击按钮,将a.html的文本框值改为“子窗口值”。
实现
打开对话框时把test1作为参数传给子窗口,在子窗口中获取参数,将参数对象(即a.html中传过来的text对象)的value属性值设置为“子窗口值”
注意:这里只能传id,不能传name
a.html代码如下

<html> 
<head> 
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″> 
<title>a.html</title> 
</head> 
<body> 
<input type=text id=test1 value=”> 
<input type=button value=” OK ” onclick='window.showModalDialog(“b.html”, test1)'> 
</body> 
</html>

b.html代码如下
<html> 
<head> 
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″> 
<title>b.html</title> 
<script language=javascript> 
function func1(){ 
//获取父窗口传过来的参数 
var ptextid = window.dialogArguments; 
if(ptextid != undefined){ 
//将父窗口传过来的对象的值改为“子窗口值” 
ptextid.value = ”子窗口值“; 
//关闭子窗口 
window.close(); 
} 
} 
</script> 
</head> 
<body> 
<input type=button value=” OK ” onclick=func1()> 
</body> 
</html>

如果需要操作的父窗口对象比较多,也可以将window或window.document作为参数传给子窗口。
例:
需求
a.html中添加id为“aform”的的form,form中有id为test2的文本框,在b.html中,除了进行上面的操作之外,还要将test2的值改为“子窗口值2”,并将form提交到c.html。
实现1
将a.html中打开对话框的函数改为如下方式:
window.showModalDialog(“b.html”, window.document);
将b.html中func1()改为如下:
function func1(){ 
var pdoc = window.dialogArguments; 
if(pdoc!=undefined){ 
pdoc.all.test1.value=”子窗口值“; 
pdoc.all.test2.value=”子窗口值2″; 
pdoc.all.aform.action=”c.html”; 
pdoc.all.aform.submit(); 
} 
}

实现2
因为在子窗口中对父窗口进行的操作比较多,也可以采用execScript的方式实现。
将a.html中打开对话框的函数改为如下方式:
window.showModalDialog(“b.html”, window);

添加javascript函数如下
function func(){ 
test1.value=”子窗口值“; 
document.all.test2.value=”子窗口值2″; 
aform.action=”c.html”; 
aform.submit(); 
}

将b.html中func1()改为如下:
function func1(){ 
var pwin = window.dialogArguments; 
if(pwin!=undefined){ 
var codeStr = ”func();” 
pwin.execScript(codeStr,”javascript”); 
window.close(); 
} 
}

showModalDialog和showModelessDialog使用心得-转载

一、showModalDialog和showModelessDialog有什么不同?
showModalDialog:被打开后就会始终保持输入焦点。除非对话框被关闭,否则用户无法切换到主窗口。类似alert的运行效果。
showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。 )

二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口?
在被打开的网页里加上<base target=”_self”>就可以了。这句话一般是放在<html>和<body>之间的。

三、怎样才刷新showModalDialog和showModelessDialog里的内容?
在showModalDialog和showModelessDialog里是不能按F5刷新的,又不能弹出菜单。这个只能依靠javascript了,以下是相关代码:
<body onkeydown=”if (event.keyCode==116){reload.click()}”>
<a id=”reload” href=”filename.htm” style=”display:none”>reload…</a>
将filename.htm替换成网页的名字然后将它放到你打开的网页里,按F5就可以刷新了,注意,这个要配合<base target=”_self”>使用,不然你按下F5会弹出新窗口的。

四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口
<input type=”button” value=”关闭“ onclick=”window.close()”>
也要配合<base target=”_self”>,不然会打开一个新的IE窗口,然后再关掉的。

五、showModalDialog和showModelessDialog数据传递技巧
(作者语:本来想用一问一答形式来写的,但是我想不出这个怎么问,所以只好这样了。)
这个东西比较麻烦,我改了好几次了不是没办法说明白(语文水平越来越差了),只好用个例子说明了。

例子
现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量var_name
一般的传递方式:

window.showModalDialog(“filename.htm”,var_name) 
//传递var_name变量 
在showModalDialog(或showModelessDialog)读取和设置时: 
alert(window.dialogArguments)//读取var_name变量 
window.dialogArguments=”oyiboy”//设置var_name变量 
这种方式是可以满足的,但是当你想在操作var_name同时再操作第二个变理var_id时呢?就无法再进行操作了。这就是这种传递方式的局限性。 
以下是我建议使用的传递方式: 
window.showModalDialog(“filename.htm”,window) 
//不管要操作什么变量,只直传递主窗口的window对象 
在showModalDialog(或showModelessDialog)读取和设置时: 
alert(window.dialogArguments.var_name)//读取var_name变量 
window.dialogArguments.var_name=”oyiboy”//设置var_name变量 
同时我也可以操作var_id变量 
alert(window.dialogArguments.var_id)//读取var_id变量 
window.dialogArguments.var_id=”001″//设置var_id变量 
同样还可以对主窗口的任何对象进行操作,如form对象里的元素。 
window.dialogArguments.form1.index1.value=”这是在设置index1元素的值“

六、多个showModelessDialog的相互操作
因为光说很费劲,我就偷点懒,直接用代码来说了,如果不明白的话那就直接来信(oyiboy#163.net(使用时请将#改成@))问我吧。
以下代码的主要作用是在一个showModelessDialog里移动别一个showModelessDialog的位置。
主文件的部份js代码。
var s1=showModelessDialog(‘控制.htm',window,”dialogTop:1px;dialogLeft:1px”) //打开控制窗口 
var s2=showModelessDialog(‘about:blank',window,”dialogTop:200px;dialogLeft:300px”)//打开被控制窗口

控制.htm的部份代码。
<script> 
//操作位置数据,因为窗口的位置数据是“xxxpx”方式的,所以需要这样的一个特殊操作函数。 
function countNumber(A_strNumber,A_strWhatdo) 
{ 
A_strNumber=A_strNumber.replace(‘px',”) 
A_strNumber-=0 
switch(A_strWhatdo) 
{ 
case ”-”:A_strNumber-=10;break; 
case ”+”:A_strNumber+=10;break; 
} 
return A_strNumber + ”px” 
} 
</script> 
<input type=”button” onclick=”window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'-')” value=”上移“> 
<input type=”button” onclick=”window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'-')” value=”左移“> 
<input type=”button” onclick=”window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'+')” value=”右移“> 
<input type=”button” onclick=”window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'+')” value=”下移“>

以上关键部份是
窗口命名方式:var s1=showModelessDialog(‘控制.htm',window,”dialogTop:1px;dialogLeft:1px”)
变量访问方式:window.dialogArguments.s2.dialogTop
这个例子只是现实showModelessDialog与showModelessDialog之间的位置操作功能,通过这个原理,在showModelessDialog之间相互控制各自的显示页面,传递变量和数据等。这要看各位的发挥了
Javascript 相关文章推荐
jquery对元素拖动排序示例
Jan 16 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
Angular 应用技巧总结
Sep 14 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
javascript中window.event事件用法详解
Dec 11 #Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 #Javascript
js控制CSS样式属性语法对照表
Dec 11 #Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 #Javascript
ajax的hide隐藏问题解决方法
Dec 11 #Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 #Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 #Javascript
You might like
多文件上载系统完整版
2006/10/09 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php不用正则验证真假身份证
2013/11/06 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python 文件管理实例详解
2015/11/10 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
django中related_name的用法说明
2020/05/20 Python
应届生高等护理求职信
2013/10/12 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
2014年关工委工作总结
2014/11/17 职场文书
不同意离婚代理词
2015/05/23 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
HTML常用标签超详细整理
2022/03/19 HTML / CSS