web-dev-qa-db-fra.com

Pourquoi window.showModalDialog est-il déconseillé? Que faut-il utiliser à la place?

Je développais un script GreaseMonkey qui utilisait window.showModalDialog.

Mais avant de le terminer, j'ai découvert que Firefox 29 avertit:

L'utilisation de window.showModalDialog () est déconseillée. Utilisez plutôt window.open (). Pour plus d'aide https://developer.mozilla.org/en-US/docs/Web/API/Window.open

Mais le problème est que window.open a besoin du privilège UniversalBrowserWrite pour ouvrir une fenêtre modale à l'aide de window.open.

Alors, pourquoi window.showModalDialog obsolète? Existe-t-il une API qui ne nécessite pas de privilèges?

Remarque : Je ne veux pas d'une fausse boîte de dialogue modale (comme celle de jQuery un), j'ai besoin d'un réel modal qui suspend l'exécution de JavaScript.

javascriptmodal-dialogprivilegeswindow.openshowmodaldialog
27
Oriol

Pourquoi window.showModalDialog est-il déconseillé?

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

En général, l'idée de mettre une implémentation de dialogue native dans le navigateur était une très bonne idée, mais window.showModalDialog était une mauvaise implémentation qui est truffée de problèmes et d'une mauvaise prise en charge du navigateur. (...)

Notez que (...) [une boîte de dialogue modale utilisant showModalDialog] est un document HTML complet, pas un extrait de code qui est injecté. Il s'agit d'une caractéristique de window.showModalDialog. Ce ne sont vraiment que deux fenêtres complètement séparées qui communiquent entre elles. Le fait que vous ayez deux fenêtres et DOM séparés signifie que vous n'avez pas à vous soucier des conflits JS et DOM, ce qui est intéressant si vous avez beaucoup de mauvais JavaScript avec une portée globale encombrée. Mais la plupart du temps, cela ajoute simplement une complexité inutile, complique la mise en œuvre du navigateur et contribue à un certain nombre de bogues. (...)

Bien qu'il soit important que les dialogues modaux empêchent l'utilisateur d'interagir avec la fenêtre d'origine, il n'y a aucune raison pour que l'utilisateur ne soit pas autorisé à interagir avec d'autres onglets ou contrôles de navigateur natifs (arrière/avant, favoris, barre d'adresse, etc.). (...) C'est en fait une grande gêne pour l'utilisateur final. (...)

L'expérience de débogage pour window.showModalDialog est horrible. (...) Vous êtes essentiellement obligé d'alerter comme en 1999 pour déterminer ce qui se passe. (...)

Actuellement, aucun navigateur mobile majeur ne prend en charge window.showModalDialog, donc si vous recherchez une assistance pour tablette/mobile, vous devez rester à l'écart.

Que faut-il utiliser à la place?

HTML5 présente le nouveau <dialog> élément, qui peut être utilisé pour afficher des boîtes de dialogue, y compris modales.

Par exemple:

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

Démo

Les problèmes sont:

  • Le support du navigateur est actuellement négligeable, mais il y a polyfill .
  • Il ne pause exécution JS.
25
Oriol

Vous pouvez utiliser mon showModalDialog polyfill en utilisant <dialog> tag si vous souhaitez toujours utiliser cette solution.

5
niutech

Actuellement, si vous ne souhaitez pas utiliser de privilèges et que vous souhaitez utiliser la fenêtre modale, la meilleure façon est d'utiliser jQuery UI Dialog ou quelque chose de similaire.

2
Ashot Seropian