Warum ist window.showModalDialog veraltet? Was ist stattdessen zu verwenden?

Warum ist window.showModalDialog veraltet?

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

Im Allgemeinen war die Idee, eine native Dialogimplementierung in den Browser zu integrieren, eine wirklich gute Idee, aber window.showModalDialog war eine schlechte Implementierung, die mit Problemen und schlechter Browserunterstützung behaftet ist. (...)

Beachten Sie, dass (...) [ein modaler Dialog mit showModalDialog] ein vollständiges HTML-Dokument ist, kein Ausschnitt, der eingefügt wird. Dies ist ein charakteristisches Merkmal von window.showModalDialog. Es sind wirklich nur zwei völlig getrennte Fenster, die miteinander kommunizieren. Die Tatsache, dass Sie zwei separate Fenster und DOMs haben, bedeutet, dass Sie sich keine Sorgen über JS- und DOM-Konflikte machen müssen. Dies ist ansprechend, wenn Sie über viel schlechtes JavaScript mit einem überfüllten globalen Geltungsbereich verfügen. Meistens erhöht dies jedoch die Komplexität, verkompliziert die Implementierung des Browsers und trägt zu einer Reihe von Fehlern bei. (...)

Es ist wichtig, dass modale Dialogfelder den Benutzer daran hindern, mit dem Ursprungsfenster zu interagieren. Es gibt jedoch keinen Grund, warum der Benutzer nicht mit anderen Registerkarten oder nativen Browsersteuerelementen (vorwärts/rückwärts, Favoriten, Adressleiste usw.) interagieren darf. (...) Dies ist für den Endbenutzer ein großer Ärger. (...)

Die Debugging-Erfahrung für window.showModalDialog ist schrecklich. (...) Grundsätzlich sind Sie gezwungen, Alarm zu schlagen, als wäre es 1999, um zu bestimmen, was los ist. (...)

Derzeit unterstützen keine großen mobilen Browser window.showModalDialog. Wenn Sie also nach Unterstützung für Tablets/Handys suchen, müssen Sie sich fernhalten.

Was ist stattdessen zu verwenden?

HTML5 führt das neue <dialog> Element, mit dem auch modale Dialoge angezeigt werden können.

Beispielsweise:

<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

Die Probleme sind:

• Die Browserunterstützung ist derzeit vernachlässigbar, es gibt jedoch ein polyfill .
• Es ist nicht Pause JS-Ausführung.

Sie können mein showModalDialog polyfill mit <dialog> tag, wenn Sie diese Lösung weiterhin verwenden möchten.

Wenn Sie derzeit keine Berechtigungen und kein modales Fenster verwenden möchten, verwenden Sie am besten jQuery UI-Dialogfeld oder etwas Ähnliches.