为什么不推荐使用window.showModalDialog? 用什么来代替?

我正在开发一个使用window.showModalDialog的GreaseMonkey脚本。

但在完成之前,我发现Firefox 29警告说:

不build议使用window.showModalDialog()。 使用window.open()来代替。 更多帮助https://developer.mozilla.org/en-US/docs/Web/API/Window.open

但问题是, window.open需要UniversalBrowserWrite特权,以打开一个模式窗口使用window.open

那么,为什么不推荐使用window.showModalDialog ? 有什么API不需要特权?

:我不想要一个假的模式对话框(如jQuery的),我需要一个真正的模式,暂停JavaScript的执行。

为什么不推荐使用window.showModalDialog?

http://tjvantoll.com/2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/

一般来说,将本地对话框实现放入浏览器的想法是一个很好的主意,但是window.showModalDialog是一个糟糕的实现,存在问题和浏览器支持不佳的问题。 (……)

请注意(…)[使用showModalDialog的模式对话框]是一个完整的HTML文档,而不是注入的片段。这是window.showModalDialog一个特征。 这实际上只是两个完全独立的窗口彼此通信。 事实上,你有两个独立的窗口和DOM意味着你不必担心JS和DOM的冲突,这是有吸引力的,如果你有很多糟糕的JavaScript混乱的全球范围。 但大多数情况下,这只会增加不必要的复杂性,使浏览器实现复杂化,并导致一些错误。 (……)

虽然modal dialog阻止用户与原始窗口进行交互是非常重要的,但不应允许用户与其他选项卡或本地浏览器控件(后退/前进,collections夹,地址栏等)进行交互。 (…)这实际上是最终用户很大的烦恼。 (……)

window.showModalDialog的debugging经验是可怕的。 (…)你基本上被迫像1999年一样警惕,以确定发生了什么事情。 (……)

目前没有主要的移动浏览器支持window.showModalDialog ,所以如果你正在寻找任何types的平板/移动支持,你需要远离。

用什么来代替?

HTML5引入了新的<dialog>元素,可以用来显示对话框,包括modal dialog。

例如:

 <dialog id="myDialog"> Foo bar <button id="hide">Close</button> </dialog> <button id="show">Show Dialog</button> 
 var dialog = document.getElementById('myDialog'); document.getElementById('show').onclick = function() { dialog.showModal(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; 

演示

问题是:

  • 浏览器支持目前可以忽略不计,但有一个polyfill 。
  • 它不会暂停 JS执行。

如果你想继续使用这个解决scheme,你可以使用我的showModalDialog使用<dialog>标签填充 。

目前,如果你不想使用特权,并希望使用模式窗口,最好的方法是使用jQuery UI对话框或类似的东西。

要阻止脚本执行,请使用while (true) { } 。 事实上,这是showModalDialog等效的不良行为是他们删除showModalDialog一部分原因。

此外,“模态”和“阻止脚本执行”是不一样的。 “莫代尔”只是意味着一切,阻止你与这些事情互动。 所以jQuery的UI对话框是模式的,他们只是不阻止脚本执行。