模态对话框的支持 (IE,Firefox,Chrome)
来源:互联网 发布:和谐网络用语 编辑:程序博客网 时间:2024/05/18 18:19
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 代替。
- 模态对话框的支持 (IE,Firefox,Chrome)
- 模态对话框的支持 (IE,Firefox,Chrome)
- BX9036: Opera 和 Chrome 对模态对话框(showModalDialog)的支持有缺陷,且非 IE 浏览器均不支持非模态对话框(showModelessDialog)
- 支持chrome, firefox, ie的xml验证 JS
- 基于raphael 的图形变化(支持firefox,chrome,IE, opera)
- 让网站变灰的CSS代码(支持IE、firefox和chrome)
- 让网站变灰的CSS代码(支持IE、FIREFOX和CHROME)
- 支持IE、Firefox的popupMenu
- 支持IE、Firefox的popupMenu
- jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
- 让网站变灰的css代码(支持IE、Firefox和Chrome)
- 让IE、Firefox、Chrome中的LI都支持display-block的兼容写法
- 推荐打印打印控件Lodop,支持IE,firefox,chrome等位内核的浏览器
- (轉)js判断浏览器(支持区分ie、firefox、opera、chrome、safari)
- 超 Chrome 赶 IE,Firefox 寻求支持多 CPU
- 文本框显示行号功能-支持IE/firefox/chrome等浏览器
- ZeroClipboard支持IE,firefox,Chrome复制到剪贴板
- javascript复制追加/写入剪贴板功能,支持chrome,firefox,ie
- 模态对话框+父子窗口交互+后台数据处理+刷新父页面
- 四则运算的实现
- 模态窗口使用总结
- Asp.net MVC FluentHTML and Fluent Interface
- nginx basic command
- 模态对话框的支持 (IE,Firefox,Chrome)
- 银行现金柜员尾箱管理
- [转]Linux dd命令备份和恢复分区与磁盘、分区表、MBR等
- EM算法原理
- ASCII、UTF-8、UTF-16BE、UTF-16LE编码方式的区别
- jQuery编辑器KindEditor4.1.4代码高亮显示设置
- Openswan系列教程1:安装并尝试
- 在路上...
- 约瑟夫环学习小记