避免 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 异步加载技术及性能分析
Jul 19 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
js实现京东轮播图效果
Jun 30 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 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的配置文件php.ini
2006/10/09 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
python实现磁盘日志清理的示例
2020/11/05 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
个人工作主要事迹
2014/05/08 职场文书
团员个人年度总结
2015/02/26 职场文书
材料采购员岗位职责
2015/04/03 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python