showModalDialog 和 showModelessDialog


Posted in Javascript onJanuary 22, 2007

关于showModalDialog和showModelessDialog的使用,一个b/s结构的项目中用window.open弹出的窗口被一些广告拦截工具给拦截了,没办法就只能用showModalDialog来解决问题,但showModalDialog这个方法不好的就是页面间传值太麻烦(传值有两种方法),可是实在没其他的办法来解决这个拦截问题,只有用这个了。代码到是两下就写好了,但调试代码的时候发现一个问题,用showModalDialog弹出的窗口中的内容一直是第一次访问页面时显示的内容,开始就怀疑是窗体调用的页面缓存,最后通过单步跟踪调试也证明了问题确实是读取的页面缓存,这说明了在asp.net中用showModalDialog和showModelessDialog做弹出窗体时最好在page_load事件加上 Response.Expires = 0; 
Response.Cache.SetNoStore(); 
 Response.AppendHeader("Pragma", "no-cache"); 
来清除缓存。用asp,php,js,vbscript测试使用showModalDialog方法没有出现需要清除缓存的情况,大家可以放心使用,关于showModalDialog的时候可以参见下面我找到的详细介绍

showModalDialog和showModelessDialog使用心得 

一、showModalDialog和showModelessDialog有什么不同?

showModalDialog:被打开后就会始终保持输入焦点。除非对话框被关闭,否则用户无法切换到主窗口。类似alert的运行效果。

showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P)

二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口?

在被打开的网页里加上<base target="_self">就可以了。这句话一般是放在<html>和<body>之间的。

三、怎样才刷新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会弹出新窗口的。

注意:如果想当访问的时候自动刷新,可以在被打开得页面,设置一个记录变量,当被打开模态窗口得时候,变量至1,然后使用上述方法刷新模态窗口,当关闭窗口得时候,变量至0.

四、如何用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的相互操作。

以下代码的主要作用是在一个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之间相互控制各自的显示页面,传递变量和数据等。这要看各位的发挥了。

Javascript 相关文章推荐
基于jquery的动态创建表格的插件
Apr 05 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
深入探究node之Transform
Jul 20 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
javascript 中对象的继承〔转贴〕
Jan 22 #Javascript
利用javascript中的call实现继承
Jan 22 #Javascript
Javascript里使用Dom操作Xml
Jan 22 #Javascript
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 #Javascript
写的htc的数据表格
Jan 20 #Javascript
共享自己写一个框架DreamScript
Jan 20 #Javascript
javascript读取RSS数据
Jan 20 #Javascript
You might like
PHP数据库操作面向对象的优点
2006/10/09 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
Js基础学习资料
2010/11/23 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
Python实现简单猜数字游戏
2021/02/03 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
优秀大学生职业生涯规划书
2014/02/27 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
入党介绍人考察意见
2015/06/01 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
vue+spring boot实现校验码功能
2021/05/27 Vue.js
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技