JS中showModalDialog关闭子窗口刷新主窗口用法详解


Posted in Javascript onMarch 25, 2017

本文实例讲述了JS中showModalDialog关闭子窗口刷新主窗口用法。分享给大家供大家参考,具体如下:

网上找了好长时间 大都是window.opener.location.reload(),等等

都不是我想要的 最后终于发现了一个 想知道的就往下看看吧

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" rel="external nofollow" 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的相互操作。

因为光说很费劲,我就偷点懒,直接用代码来说了。

以下代码的主要作用是在一个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相关内容可查看本站专题:《JavaScript中ajax操作技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js获取input标签的输入值实现代码
Aug 05 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 #Javascript
JS实现列表页面隔行变色效果
Mar 25 #Javascript
angular仿支付宝密码框输入效果
Mar 25 #Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 #jQuery
axios基本入门用法教程
Mar 25 #Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 #Javascript
ECMAScript6 新特性范例大全
Mar 24 #Javascript
You might like
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
python enumerate函数的使用方法总结
2017/11/15 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
如何基于Python按行合并两个txt
2020/11/03 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
教室标语大全
2014/06/21 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang
Nginx跨域问题解析与解决
2022/08/05 Servers