web-dev-qa-db-ja.com

window.showModalDialogが推奨されないのはなぜですか？代わりに何を使用しますか？

window.showModalDialogを使用するGreaseMonkeyスクリプトを開発していました。

しかし、それを完了する前に、Firefox 29が警告することを発見しました。

Window.showModalDialog（）の使用は非推奨です。代わりにwindow.open（）を使用してください。さらにヘルプが必要な場合 https://developer.mozilla.org/en-US/docs/Web/API/Window.open

しかし、問題は、window.openを使用してモーダルウィンドウを開くには、window.openにUniversalBrowserWrite特権が必要なことです。

それでは、なぜwindow.showModalDialogは非推奨になりましたか？特権を必要としないAPIはありますか？

注：私はfakeモーダルダイアログ（jQueryのような1）、JavaScriptの実行を一時停止するrealモーダルが必要です。

javascriptmodal-dialogprivilegeswindow.openshowmodaldialog
27
Oriol

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の特徴的な機能です。実際には、互いに通信する2つの完全に独立したウィンドウです。 2つの個別のウィンドウと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実行ではありません。
25
Oriol

あなたは私の showModalDialog polyfill using <dialog>タグは、このソリューションを引き続き使用する場合に使用します。

5
niutech

現在、特権を使用せず、モーダルウィンドウを使用する場合、最良の方法は jQuery UI Dialog または同様のものを使用することです。

2
Ashot Seropian