避免 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 替换Html标签实现代码
Oct 14 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
jQuery实现滚动效果
Nov 17 jQuery
vue.js实现标签页切换效果
Jun 07 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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
PHP版自动生成文章摘要
2008/07/23 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
医护人员英文求职信范文
2013/11/26 职场文书
招聘单位介绍信
2014/01/14 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技