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 相关文章推荐
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
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代码
2007/03/08 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
vue之延时刷新实例
2019/11/14 Javascript
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
python中关于for循环的碎碎念
2017/06/30 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
python实现猜数字小游戏
2020/03/24 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
高中物理教学反思
2014/02/08 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
房屋出售协议书
2014/04/10 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
营销与策划实训报告
2014/11/05 职场文书
高三毕业评语
2014/12/31 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技