32

我正在开发一个使用window.showModalDialog.

但在完成之前，我发现 Firefox 29 发出警告：

不推荐使用 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 执行。

4

4 回答 4

28

为什么不推荐使用 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 和混乱的全局范围，这很有吸引力。但大多数情况下，这只会增加不必要的复杂性，使浏览器实现复杂化，并导致许多错误。(...)

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

的调试体验window.showModalDialog很糟糕。（...）你基本上被迫像 1999 年一样警觉，以确定发生了什么。(...)

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

改用什么？

HTML5 引入了新<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 执行。
于 2014-08-19T18:28:15.073 回答
6

如果您仍想使用此解决方案，可以使用我的showModalDialog polyfill using tag。<dialog>

于 2014-08-19T05:10:54.647 回答
3

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

于 2013-12-22T21:07:47.540 回答
-1

要阻止脚本执行，请使用while (true) { }. 事实上，这同样是不好的行为，这是showModalDialog他们删除的部分原因showModalDialog。

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

于 2014-03-12T17:38:58.160 回答