避免 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 相关文章推荐
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
判断目标是否是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数组操作――获取数组最后一个值的方法
2015/04/14 PHP
php检查页面是否被百度收录
2015/10/28 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
laravel学习教程之存取器
2016/07/30 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python中针对函数处理的特殊方法
2014/03/06 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
毕业生自我鉴定
2013/11/05 职场文书
监理员的岗位职责
2013/11/13 职场文书
公务员综合考察材料
2014/02/01 职场文书
大学生作弊检讨书
2014/09/11 职场文书
财产保全担保书
2015/01/20 职场文书
介绍信模板
2015/01/31 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书