避免 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 相关文章推荐
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
vue3实现v-model原理详解
Oct 09 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
判断目标是否是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.MVC的模板标签系统(二)
2006/09/05 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
毕业生多媒体设计求职信
2013/10/12 职场文书
大学新生军训感言
2014/02/25 职场文书
党员志愿者活动总结
2014/06/26 职场文书
信访工作汇报材料
2014/10/27 职场文书
实训报告范文大全
2014/11/04 职场文书
青岛导游词
2015/02/12 职场文书
雷锋之歌观后感
2015/06/10 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android