避免 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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
EsLint入门学习教程
Feb 17 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 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+javascript实现二级级联菜单的制作
2008/05/06 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
pytorch之添加BN的实现
2020/01/06 Python
Python如何安装第三方模块
2020/05/28 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
python实现计算图形面积
2021/02/22 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
C语言中break与continue的区别
2012/07/12 面试题
公司出纳岗位职责
2013/12/07 职场文书
成功的酒店创业计划书
2013/12/27 职场文书
第一军规观后感
2015/06/12 职场文书
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP