Solución al problema de que Chrome no admite showModalDialog y no puede devolver returnValue

¿Qué?El cuadro de diálogo modal no funciona más63;

La semana pasada modifique y realicé pruebas en un proyecto de administración de fondo, al probar la compatibilidad con varios navegadores, descubrí que el método showModalDialog en el navegador Chrome no muestra un cuadro de diálogo modal, sino que se abre como si se hubiera abierto una nueva página, y la ventana padre puede obtener el foco libremente y abrir múltiples ventanas, además, el valor de retorno returnValue no se puede devolver, siempre es undefined. Estos muchos problemas son muy preocupantes, por lo que realizé pruebas en varios navegadores de última generación.

浏览器	¿Soporta	Estado
IE9	○
Firefox13.0	○
safari5.1	○
chrome19.0	×	No es un cuadro de diálogo modal, sino que abre una nueva ventana
Opera12.0	×	Nada sucede, ni siquiera se abre una ventana

¿Qué abre Chrome realmente

Dado que no se abre un cuadro de diálogo modal, sino que se abre una nueva ventana como si se hubiera abierto una nueva ventana, simplemente hay que verificar si la subventana window.opener está vacía para entenderlo.

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

En chrome, se muestra un objeto [object window], mientras que en IE es undefined. Ahora sabemos que chrome trata showModalDialog como window.open. Esto significa que podemos usar window.opener para operar con los subventanas de chrome. También descubrí un fenómeno muy interesante, en firefox, al probar window.opener, también no está vacío, así que probé de nuevo el uso de showModalDialog en el subventana sobre window.opener y window.dialogArguments en varios navegadores, debido a que el navegador Opera no abre ni una ventana, se eliminó de las pruebas.

说明下父窗口的showModalDialog方法中arguments传递是window对象，下面是测试的结果：

浏览器	模态对话框	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	×

以上是我测试的结果，各个浏览器所支持的程度还是不一样的。还要说一下Firefox浏览器下，子窗口假如刷新的话window.dialogArguments照样会丢失，变成undefined。以上结果中我们可以看出返回值returnValue就只有chrome浏览器返回的是undefined，其他浏览器都没有问题。那该如何解决这个问题呢？

解决returnValue问题

通过以上的种种测试，我们已经知道chrome的showModalDialog方法很像执行了window.open方法，那么我们可以利用window.opener来实现window.returnValue的功能。

注意：temp = Math.random()这个随机参数是为了解决缓存问题，不少朋友测试出undefined是因为是缓存的问题。 追加于2012-10-17

部分父窗口js代码：

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

部分子窗口js代码：

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

Esto también es compatible con navegadores como IE, FireFox, Chrome, Safari, etc.

Por último

Por último, alguien podría preguntar cómo se puede implementar un cuadro de diálogo modal. Creo que debería poderse lograr con algunas técnicas de JavaScript, pero no lo recomiendo. También he investigado muchos materiales y no he podido resolver este problema adecuadamente. Por supuesto, también pueden haber otras ideas, como para evitar que se abran más ventanas emergentes, se puede establecer el botón open como no disponible al hacer clic para abrir la ventana, y solo se vuelve disponible al cerrar la ventana emergente. Todos pueden probarlo por su cuenta, tal vez haya mejores métodos.

Por último, quiero decir que en el diseño web actual, es muy común usar div para simular un cuadro de diálogo en la página, el estilo se puede personalizar, y la interacción es bastante buena. No es necesario necesariamente usar un cuadro de diálogo modal. Hay muchos modos en línea, hoy escribo aquí, si hay errores, por favor sean amables y corrijan

Declaración: el contenido de este artículo se ha obtenido de la red, y los derechos de autor pertenecen a los propietarios originales. El contenido ha sido contribuido y subido por los usuarios de Internet de manera autónoma. Este sitio no posee los derechos de propiedad, no ha sido editado artificialmente y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar, y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.