window.showModalDialog()返回值的学习心得总结


Posted in Javascript onJanuary 07, 2014

下面先说说window.showModalDialog的基本用法

showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

使用方法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

参数说明:
sURL--必选参数,类型:字符串。用来指定对话框要显示的文档的URL。

vArguments--可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures--可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。

1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

下面几个属性是用在HTA中的,在一般的网页中一般不使用。
10.dialogHide:
{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

参数传递:
1.要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

<script>
var obj = new Object();
obj.name="ttop";
window.showModalDialog("test.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
test.htm
<script>
var obj = window.dialogArguments
alert("您传递的参数为:" + obj.name)
</script>

2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:
<script>
str =window.showModalDialog("test.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
test.htm
<script>
window.returnValue="/";
</script>

一、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会弹出新窗口的。

四、如何用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元素的值"

在父页面中用onClick=""var reVal = window.showModalDialog('changephoto.htm','dialogWidth:500px;dialogHeight:300px;help:no');if (typeof(reVal) != 'undefined') {form.textname.value=reVal;}"" style=""cursor:hand "">点击这里修改图片

在字窗口'changephoto.htm'中打开一个框架集,框架集中包含一个asp文件,先将asp的值返回到changephoto.htm中 再将这个值返回到主页面中

changephoto.htm: <input type=button onclick="onClose();" value=" 关 闭 ">

function onClose() { window.returnValue = form1.save.value;//也可以将window.returnValue改成window.dialogArguments.oblogform.blogimage.value window.close(); }

asp文件:parent.document.form1.save.value ="值或变量";

Javascript 相关文章推荐
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
tsconfig.json配置详解
May 17 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
小程序自动化测试的示例代码
Aug 11 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 Javascript
js showModalDialog参数的使用详解
Jan 07 #Javascript
js showModalDialog弹出窗口实例详解
Jan 07 #Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 #Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 #Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 #Javascript
asp.net刷新本页面的六种方法总结
Jan 07 #Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 #Javascript
You might like
中国的第一台收音机
2021/03/01 无线电
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
Javascript学习笔记二 之 变量
2010/12/15 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
机电一体化自荐信
2013/12/10 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript