避免 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 相关文章推荐
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
javascript中indexOf技术详解
May 07 Javascript
JavaScript中string对象
Jun 12 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 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 mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Python制作钉钉加密/解密工具
2016/12/07 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
大学军训自我鉴定
2013/12/15 职场文书
员工薪酬福利制度
2014/01/17 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
就业证明函
2015/06/17 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技