避免 showModalDialog 弹出新窗体的原因分析


Posted in Javascript onMay 31, 2010

showModalDialog和showModelessDialog

一、showModalDialog和showModelessDialog有什么不同?
showModalDialog:被打开后就会始终保持输入焦点。除非对话框被关闭,否则用户无法切换到主窗

口。类似alert的运行效果。
showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡

住一下而以。

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

三、怎样才刷新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之间相互控制各自的显示页面,传递变量和数据等。这要看各位的发挥了。

如果打开了一个模式窗口,想在打开的窗口中,关闭本窗口,重新加载父窗口,代码如下:

Response.Write("<script

language=javascript>parent.window.opener=null;parent.window.dialogArguments.location.reload ();window.close();</script>");
或者
function doModal(url){
win=window.showModalDialog (url,0,"dialogWidth:500px;dialogHeight:500px;status:no;help:no;");
document.location.reload();//js页面中加入这句话就行了

Javascript 相关文章推荐
JavaScript的document对象和window对象详解
Dec 30 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 #Javascript
js 数组的for循环到底应该怎么写?
May 31 #Javascript
javascript 四则运算精度修正函数代码
May 31 #Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 #Javascript
javascript 子窗体父窗体相互传值方法
May 31 #Javascript
js post方式传递提交的实现代码
May 31 #Javascript
JS 类型转换常见方法小结
May 31 #Javascript
You might like
是否存在第一台收音机的说法
2021/03/01 无线电
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
Vue2单一事件管理组件通信
2017/05/09 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
Python list运算操作代码实例解析
2020/01/20 Python
python实现拼接图片
2020/03/23 Python
python如何写出表白程序
2020/06/01 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
计算机应用毕业生自荐信
2013/10/23 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
犯错检讨书
2014/02/21 职场文书
搞笑创意广告语
2014/03/17 职场文书
2014年就业工作总结
2014/11/26 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis