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

I was developing a GreaseMonkey script which used window.showModalDialog.

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

But before finishing it, I have discovered that Firefox 29 warns:

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

Use of window.showModalDialog() is deprecated. Use window.open() instead. For more help https://developer.mozilla.org/en-US/docs/Web/API/Window.open

不推荐使用window.showModalDialog()。请改用window.open()。如需更多帮助,请访问https://developer.mozilla.org/en-US/docs/Web/API/Window.open

But the problem is that window.open needs UniversalBrowserWrite privilege in order to open a modal window using window.open.

但问题是window.open需要UniversalBrowserWrite权限才能使用window.open打开模态窗口。

Then, why is window.showModalDialog deprecated? Is there any API which doesn't require privileges?

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

Note: I don't want a fake modal dialog (like jQuery's one), I need a real modal which pauses JavaScript execution.

注意:我不想要一个虚假的模态对话框(比如jQuery的一个),我需要一个暂停JavaScript执行的真实模态。

4 个解决方案

#1

Why is window.showModalDialog deprecated?

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

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

In general the idea of putting a native dialog implementation into the browser was a really good idea, but window.showModalDialog was a bad implementation that is riddled with issues and poor browser support. (...)

一般来说,将本机对话框实现放入浏览器的想法是一个非常好的主意,但window.showModalDialog是一个糟糕的实现,充满了问题和糟糕的浏览器支持。 (......)

Note that (...) [a modal dialog using showModalDialog] is a full HTML document, not a snippet that is injected in. This is a characterizing feature of window.showModalDialog. It’s really just two completely separate windows communicating with each other. The fact that you have two separate windows and DOMs means you don’t have to worry about JS & DOM conflicts, which is appealing if you have a lot of bad JavaScript with a cluttered global scope. But mostly this just adds unnecessary complexity, complicates the browser implementation, and contributes to a number of bugs. (...)

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

While it’s important that modal dialogs prevent the user from interacting with the originating window, there’s no reason the user shouldn’t be allowed to interact with other tabs or native browser controls (back/forward, favorites, address bar, etc). (...) This is actually a big annoyance to the end user. (...)

虽然模态对话框阻止用户与原始窗口交互很重要,但是没有理由不允许用户与其他选项卡或本机浏览器控件(后退/前进,收藏夹,地址栏等)进行交互。 (...)这对最终用户来说实际上是一个很大的麻烦。 (......)

The debugging experience for window.showModalDialog is horrible. (...) You're basically forced to alert like it’s 1999 to determine what’s going on. (...)

window.showModalDialog的调试体验非常糟糕。 (...)你基本上*像1999年那样发出警报,以确定发生了什么。 (......)

Currently no major mobile browsers support window.showModalDialog, so if you’re looking for any sort of tablet / mobile support you need to stay away.

目前没有主要的移动浏览器支持window.showModalDialog,因此如果您正在寻找任何类型的平板电脑/移动支持,您需要远离。

What to use instead?

用什么代替?

HTML5 introduces the new <dialog> element, which can be used to display dialogs, including modal ones.

HTML5引入了新的

For example:

<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();      };

Demo

The problems are:

问题是:

Browser support is currently negligible, but there is a polyfill.

浏览器支持目前可以忽略不计,但有一个polyfill。

It doesn't pause JS execution.

它不会暂停JS执行。

#2

You can use my showModalDialog polyfill using <dialog> tag if you want to still use this solution.

如果您仍想使用此解决方案,可以使用

#3

Currently, if you don't want to use privileges and want to use modal window, best way is to use jQuery UI Dialog or something similar.

目前,如果您不想使用权限并且想要使用模态窗口,最好的方法是使用jQuery UI Dialog或类似的东西。

#4

-4

To block script execution, use while (true) { }. The fact that this is equivalently bad behavior to showModalDialog is part of the reason they removed showModalDialog.

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

Also, "modal" and "blocking script execution" are not the same thing. "Modal" simply means on top of everything else, preventing you from interacting with those things. So jQuery UI dialogs are modal, they just don't block script execution.

此外,“模态”和“阻止脚本执行”不是一回事。 “模态”仅仅意味着在其他一切之上,阻止你与这些事物互动。所以jQuery UI对话框是模态的,它们只是不阻止脚本执行。

#1