转:模态对话框的支持 (IE,Firefox,Chrome)
原文:模态对话框的支持 (IE,Firefox,Chrome)
Opera 和 Chrome 对模态对话框(showModalDialog)的支持有缺陷,且非 IE 浏览器均不支持非模态对话框(showModelessDialog)
标准参考
模态对话框 和 非模态对话框 的概念来自于 GUI 程序,实际上这两种对话框仍然是窗口的一种。
模态对话框在打开后会阻断其父窗口接受键盘及鼠标消息,并且使父窗口是去焦点。只有当用户关闭当前的模态对话框后,父窗口才可再次得到焦点以及恢复各种消息。典型的模态对话框有:打开/另存为对话框;
非模态对话框则不会阻断其父窗口接受键盘及鼠标消息,其父窗口仍然可以获得焦点。典型的非模态对话框有:查找/搜索对话框。
window.showModalDialog 方法不是 W3C 规范中的方法,其最初由 IE4 引入,用来创建一个模态对话框,并在其中显示 HTML 页面。其格式为:
vReturnValue = object.showModalDialog(sURL [, vArguments] [, sFeatures])
三个参数分别为:对话框加载的 HTML 页面的 URL、传入对话框页面的参数,控制对话框展现效果的参数。
其中可在对话框页面中通过 document.arguments 获得 vArguments 传入的参数的内容。
在 Firefox 3 中,也实现了对 window.showModalDialog 方法,其调用方式与IE类似,只是有个别参数没有实现。
关于 showModalDialog 方法的详细信息,请参考 MSDN 及 Mozilla Developer Center 中的内容。
window.showModelessDialog 方法也不是 W3C 规范中的方法,其最初由 IE5 引入,用来创建一个非模态对话框,并在其中显示 HTML页面。其格式为:
vReturnValue = object.showModelessDialog(sURL [, vArguments] [, sFeatures])
使用方法与 showModalDialog 类似。
关于 showModelessDialog 方法的详细信息,请参考 MSDN 中的内容。
问题描述
目前 Firefox 与 Safari 实现了与 IE 非常接近的 showModalDialog 方法,Chrome 中则是将其当做 window.open 方法处理,Opera 中暂时不支持此方法。
对于 showModelessDialog 方法,目前仅 IE 支持。
造成的影响
若在脚本代码中使用了 showModalDialog 与 showModelessDialog 方法,则可能会导致运行效果不是预期效果,甚至可能导致代码报错。
受影响的浏览器Firefox Safari 不支持 showModelessDialog 方法。
Chrome 将 showModalDialog 方法当做 window.open 方法处理,不支持 showModelessDialog 方法。
Opera 不支持 showModalDialog 与 showModelessDialog 方法。
问题分析
首先分析各浏览器对 showModalDialog 方法的支持情况。
分析以下代码:
modaldialog.html
<input type= "text " id= "textbox " value= "defaultValue " /><br />
<button id= "open1 ">Open ModalDialog</button>
<script>
var updatetext = " ";
function update() {
document.getElementById( "textbox ").value = updatetext;
}
document.getElementById( "open1 ").onclick = function () {
window.showModalDialog( "inner.html ", window);
}
</script>
inner.html
<input type= "text " id= "dialogtext " /><button id= "ok ">OK!</button>
<script>
document.getElementById( "dialogtext ").value =
window.dialogArguments.document.getElementById( "textbox ").value;
document.getElementById( "ok ").onclick = function () {
window.dialogArguments.updatetext =
document.getElementById( "dialogtext ").value;
window.dialogArguments.update();
window.close();
}
</script>
上面代码中,modaldialog.html 使用 window.showModalDialog 方法创建模态对话框,载入 inner.html,并传入 modaldialog.html 页面的 window 对象。
页面 inner.html,打开后,文本框 INPUT[id= "dialogtext "] 的 value 初始值为页面 modaldialog.html 中文本框 INPUT[id= "textbox "] 的 value 值,当改变 INPUT[id= "dialogtext "] 的 value 值并点击 "OK " 按钮后,模态对话框关闭,页面 modaldialog.html 中文本框 INPUT[id= "textbox "] 的 value 值将变为模态对话框内文本框中的字符串。
这段代码在不同的浏览器环境中的表现如下: IE6 IE7 IE8 Firefox Safari Chrome Opera
window.showModalDialog 返回值 = function OK OK OK
弹出对话框 OK OK FAIL
对话框为模态对话框 OK FAIL FAIL
对话框与父窗口通过 arguments 的交互 OK FAIL FAIL
可见,各浏览器的 window 对象中均包含 showModalDialog 方法,且均返回 function () { [native code] }。
在 IE Firefox Safari 中,对 showModalDialog 支持较好,弹出的窗口为模态对话框,父窗口失去焦点,且通过 arguments 参数,父窗口与模态对话框直接成功完成数据交互;
在 Chrome 中,虽然通过 showModalDialog 成功弹出了对话框,但此对话框并不是模态的,父窗口仍然可以获得焦点,且数据交互失败,很类似于 window.open 方法;
在 Opera 中,虽然 window.showModalDialog 返回为真,但弹不出对话框,也不能实现其功能。
下面分析各浏览器对 showModelessDialog 方法的支持情况。
modelessdialog.html
<input type="text" id="textbox" value="defaultValue" /><br />
<button id="open1">Open ModelessDialog</button>
<script>
var updatetext = "";
function update() {
document.getElementById("textbox").value = updatetext;
}
document.getElementById("open1").onclick = function () {
window.showModelessDialog("inner.html", window);
}
</script>
inner.html
<input type="text" id="dialogtext" /><button id="ok" >OK!</button>
<script>
document.getElementById("dialogtext").value =
window.dialogArguments.document.getElementById( "textbox").value;
document.getElementById("ok").onclick = function () {
window.dialogArguments.updatetext =
document.getElementById("dialogtext").value;
window.dialogArguments.update();
window.close();
}
</script>
上面代码和上一段的类似,只不过将 showModalDialog 方法换成了 showModelessDialog 方法。
这段代码在不同的浏览器环境中的表现如下: IE6 IE7 IE8 Firefox Chrome Safari Opera
window.showModelessDialog 返回值 = function OK FAIL
showModelessDialog 方法目前仅被 IE 支持,在其他浏览器中 window.showModelessDialog 均返回 "undefined " 。
解决方案
showModalDialog 方法与 showModelessDialog 方法均不被 W3C 支持,虽然 showModalDialog 方法目前已比较广泛的被支持,但还是应避免使用它。因为模态对话框会阻塞父窗口的输入,使其是去焦点,这将对用户体验不利。
对于 showModalDialog 方法可以使用模拟模态对话框的方式,比如通过半透明 DIV 元素遮住页面主体,在其之上显示 "对话框 " 内容。
对于 showModelessDialog 方法可以使用 window.open 代替。
转载于:https://www.cnblogs.com/gavinw/archive/2013/03/29/2988172.html
转:模态对话框的支持 (IE,Firefox,Chrome)相关推荐
- [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器...
[完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器 原文:[完美]原生JS获取浏览器版本判 ...
- 五大浏览器的历史、差异、对CSS和ES的支持 内核:Trident、Gecko、Blink、Webkit 浏览器:IE Opera Safari Firefox Chrome
五大浏览器的历史.差异.对CSS和ES的支持 内核:Trident.Gecko.Blink.Webkit 浏览器:IE Opera Safari Firefox Chrome 历史 Internet ...
- showModalDialog模态对话框的使用以及浏览器兼容
ModalDialog 是什么? showModalDialog 是js window对象的一个方法, 和window.open一样都是打开一个新的页面. 区别是: showModalDialog打开 ...
- showModalDialog模态对话框的使用详解以及浏览器兼容
showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面.区别是:showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法 ...
- Java中modal dialog,showModalDialog模态对话框的使用详解以及浏览器兼容
1.ModalDialog是什么?showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面. 区别是:showModalDialog打开子窗口后 ...
- 使用javascript打开模态对话框
1. 标准的方法 <script type="text/javascript"> function openWin(src, width, height, show ...
- showModalDialog模态对话框 的使用及一般问题的解决
showModalDialog模态对话框 的使用及一般问题的解决 1,使用 showModalDialog(sURL [, oArguments] [,sFeatures]) 参数 : sURL : ...
- Google Hangouts支持使用Firefox WebRTC
自去年4月Firefox 53删除NPAPI以来,该插件一直无法被正常访问.而就在去年年末,Google Hangouts(环聊)重新支持使用Firefox WebRTC.本文深度剖析了Firefox ...
- MFC非模态对话框实例
[转载]MFC非模态对话框实例 2012-06-17 16:21:41| 分类: C++/MFC | 标签: |字号大中小 订阅 实例目的 在Windows环境中,对话框是一种常用的输入输出手段. ...
最新文章
- JavaScript函数式编程学习
- c mvc ajax请求,springMVC的ajax请求
- CodeFirst EF中导航属性的个人理解
- Emacs之LaTeX环境配置及效果展示
- [JavaWeb-HTML]HTML标签_文件标签
- Ubuntu下安装Chrome浏览器的两个方法
- tf.keras data
- Ionic生命周期与注意点
- 小峰servlet/jsp(2)
- python自动化笔记_python自动化学习笔记(一)
- 使用pjsip传输已经编码的视频,源码在github
- 番茄助手破解找到VA_X.dll的位置
- 【三星笔试】给定一些汽油E,给定一段距离D,完成D这段距离...
- 最通俗易懂的JUC多线程并发编程
- 2015上半年教师资格考试高中数学(404)- 用向量数量积推导两角差余弦公式
- 基于Socket编程的网络聊天室
- 1.2 Unity3D 的注册
- 数学建模学习笔记---Mooc1
- 10kV高压开关柜无线测温系统设计及产品选型
- python基础学习(九)——堡垒机案例
热门文章
- JSP的9个内置对象-response
- vue 引入json地图_VUE中通过Echarts引入地图
- 河南科技大学计算机基础题库,河南科技大学大学计算机基础Excel基本操作选择题汇总...
- php filespl,PHP SPL--遍历目录
- jquery ajax mysql登录_ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库...
- 旅游流的概念_2020年去张家界凤凰古城旅游亲身体验经历分享——实用攻略(图文)...
- java 静态方法 多线程_Java静态方法的线程安全性问题
- x什么意思c语言新闻app啊我et,C语言笔试题目
- 验证必须是数字php,Element 中表单非必填数据项 必须为数字的验证问题
- 木炭怎么获得_木炭机一体化流程中制做木炭是怎么完成的