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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
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
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Python如何在DataFrame增加数值
2020/02/14 Python
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
精彩自我鉴定
2014/01/16 职场文书
大型车展策划方案
2014/02/01 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
写给老师的感谢信
2015/01/20 职场文书