Solution au problème de non-support de showModalDialog et au problème de retour de returnValue par Chrome

What?La boîte de dialogue modale est défaillante?

La semaine dernière, j'ai modifié et testé un projet de gestion de backend. Lors du test de compatibilité avec les différents navigateurs, j'ai découvert que la méthode showModalDialog dans Chrome n'affiche pas de boîte de dialogue modale, mais comme une nouvelle page ouverte, la fenêtre parent peut toujours obtenir le focus et ouvrir plusieurs fenêtres, et le retour de valeur returnValue ne peut pas être retourné, toujours undefined. Ces nombreux problèmes sont très énervants, donc j'ai fait des tests sur les versions les plus récentes des principaux navigateurs.

navigateur	Prise en charge	Statut
IE9	○
Firefox13.0	○
safari5.1	○
chrome19.0	×	Ce n'est pas une boîte de dialogue modale, mais une nouvelle fenêtre ouverte
Opera12.0	×	Rien ne se passe, même pas une fenêtre qui apparaît

Quoi exactement ouvre Chrome

Puisque ce n'est pas une boîte de dialogue modale, mais comme si on avait ouvert une nouvelle fenêtre, il suffit de vérifier si window.opener de la fenêtre enfant est vide pour comprendre.

<script type="text/javascript">
    alert(window.opener);
</script>

Dans Chrome, l'affichage est un objet [object window], tandis que dans IE, c'est undefined. Actuellement, on sait que Chrome traite showModalDialog comme window.open. Cela signifie que nous pouvons utiliser window.opener pour manipuler les fenêtres enfant de Chrome. J'ai également découvert un phénomène intéressant : dans Firefox, window.opener n'est pas vide. Alors, j'ai testé l'utilisation de showModalDialog dans la fenêtre enfant pour vérifier l'état de window.opener et window.dialogArguments dans différents navigateurs. Comme Opera ne fait même pas apparaître de fenêtre, nous l'excluons des tests.

Expliquons la méthode showModalDialog de la fenêtre mère où les arguments transmis sont l'objet window, voici les résultats des tests :

navigateur	fenêtre modale	window.opener	window.dialogArguments	returnValue
IE9	○	undefined	[object Window]	○
Firefox13.0	○	[object Window]	[object Window]	○
safari5.1	○	[object Window]	[object Window]	○
chrome19.0	×	[object Window]	undefined	×

Voici les résultats de mes tests, le degré de support des différents navigateurs est différent. Je dois également mentionner que sous Firefox, si la fenêtre fille est rafraîchie, window.dialogArguments sera également perdu et deviendra undefined. D'après les résultats ci-dessus, nous pouvons voir que la valeur de retour returnValue ne sera undefined que dans le navigateur Chrome, et il n'y a pas de problème avec les autres navigateurs. Alors, comment résoudre ce problème ?

Résoudre le problème de returnValue

Après de nombreux tests, nous savons que la méthode showModalDialog de Chrome est très similaire à l'exécution de la méthode window.open, alors nous pouvons utiliser window.opener pour réaliser la fonction de window.returnValue.

Attention : le paramètre aléatoire temp = Math.random() est utilisé pour résoudre les problèmes de cache, de nombreux utilisateurs ont testé que undefined est dû à un problème de cache. Ajouté le2012-10-17

Code JavaScript de la fenêtre mère :

window.onload = function () {
  var returnValue = window.showModalDialog("son.html?temp=" + Math.random(), window);
  //for chrome
  if (returnValue == undefined) {
    returnValue = window.returnValue;
  }
  alert(returnValue);
}

Code JavaScript de la fenêtre fille :

if (window.opener != undefined) {
    //for chrome
    window.opener.returnValue = "opener returnValue";
}
else {
    window.returnValue = "window returnValue";
}
window.close();

Cela fonctionne également sous IE, FireFox, Chrome, Safari et d'autres navigateurs.

En dernier

En dernier lieu, quelqu'un va demander comment réaliser une boîte de dialogue modale ? Je pense que cela peut être réalisé avec des techniques JavaScript, mais je ne recommande pas de le faire, j'ai également cherché beaucoup de ressources et je ne peux pas résoudre ce problème de manière satisfaisante. Bien sûr, il peut y avoir d'autres idées, par exemple, pour éviter d'ouvrir plus de fenêtres, vous pouvez désactiver le bouton open lors de l'ouverture de la fenêtre, et le rendre à nouveau disponible une fois la sous-fenêtre fermée. Vous pouvez tous essayer cela vous-même, peut-être qu'il y a d'autres meilleures méthodes.

Ce que je veux dire en dernier est que dans la conception Web actuelle, il est très courant d'utiliser div pour simuler une fenêtre dans une page, le style est personnalisé, et l'interaction est très bonne. Il n'est pas nécessaire d'utiliser une fenêtre modale. Comment simuler sur Internet, aujourd'hui, je vais écrire ici, que pensez-vous des erreurs, s'il vous plaît faire des corrections~

Déclaration : Le contenu de cet article est issu du réseau, et appartient au propriétaire original. Le contenu est contribué et téléchargé par les utilisateurs d'Internet, ce site ne détient pas de propriété, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)