Lösung für das Problem mit js-Modaldialogfenstern ![window.dialogArguments]

Was?Der Modaldialog ist ausgefallen?

Diese Woche wurde ein Hintergrundprojekt getestet und bei der Abstimmung mit der Kompatibilität der verschiedenen Browser festgestellt, dass showModalDialog in Chrome-Browsern nicht als Modaldialog angezeigt wird, sondern wie eine neu geöffnete Seite, der Elternfenster kann weiterhin den Fokus frei ändern und mehrere Fenster öffnen, und der Rückgabewert returnValue kann nicht zurückgegeben werden, immer undefined. Diese vielen Probleme sind sehr ärgerlich, daher wurden Tests mit den neuesten Versionen der wichtigsten Browser durchgeführt.

Browser	Ob unterstützt wird	Status
IE9	○
Firefox13.0	○
safari5.1	○
chrome19.0	×	Es ist nicht ein Modaldialog, sondern ein neuer Fenster geöffnet wurde
Opera12.0	×	Es passiert nichts, nicht einmal ein Fenster wird geöffnet

Was öffnet Chrome wirklich?

Da ein Modaldialog nicht geöffnet wird, sondern wie ein neuer Fenster geöffnet wird, muss nur überprüft werden, ob das Unterfenster window.opener leer ist, um dies zu verstehen.

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

In Chrome wird ein [object window] -Objekt angezeigt, während IE es als undefined behandelt. Jetzt weiß man, dass Chrome showModalDialog als window.open behandelt. Das bedeutet, dass wir die Unterfenster des Chrome-Browsers mit window.opener steuern können. Hier wurde auch ein sehr interessantes Phänomen entdeckt, dass window.opener in Firefox ebenfalls nicht leer ist, daher habe ich es getestet, wie showModalDialog im Unterfenster die Situation von window.opener und window.dialogArguments in verschiedenen Browsern behandelt. Da Opera-Browser keine Fenster öffnet, wurde dieser Browser aus den Tests ausgeschlossen.

Erklärung: Der Übertrag von Argumenten im showModalDialog-Verfahren des Hauptfensters ist ein window-Objekt, hier sind die Testergebnisse:

Browser	Modaldialogfenster	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	×

Hier sind meine Testergebnisse, die Unterstützung durch verschiedene Browser variiert noch. Ich möchte noch hinzufügen, dass unter Firefox, wenn das Unterfenster neu geladen wird, window.dialogArguments ebenfalls verloren geht und in undefined umgewandelt wird. Aus diesen Ergebnissen geht hervor, dass der Rückgabewert returnValue nur im Chrome-Browser undefined ist, während alle anderen Browser keine Probleme haben. Wie können wir dieses Problem lösen?

Lösung des returnValue-Problems

Durch alle diese Tests haben wir herausgefunden, dass die showModalDialog-Methode von Chrome ähnlich funktioniert wie die window.open-Methode, daher können wir window.opener nutzen, um die Funktion von window.returnValue zu erreichen.

Hinweis: Der zufällige Parameter temp = Math.random() dient dazu, Cache-Probleme zu lösen. Viele Freunde haben festgestellt, dass undefined aufgrund von Cache-Problemen auftritt. Hinzugefügt am2012-10-17

Kodeteil des Hauptfensters:

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

Kodeteil des Unterfensters:

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

这样在IE,FireFox,Chrome,Safari等浏览器下都可以通用了。

最后

最后有人要问那该如何实现模态对话框呢？我觉得应该是可以用一些js技巧去实现的，但是我不推荐这样做。我也查询了很多资料，都不能很好地解决这个问题。当然，也可以有其他一些思路，比如为了不弹出更多的窗体，可以在点击打开窗体的时候将那个open按钮设置为不可用，只有关闭了子窗体再设置成可用。这些大家都可以自己去实践下，或许有更好的方法。

最后我想说的是，在当今的网页设计中，使用div在页面内模拟一个窗体是很流行的。样式自定义，交互都很不错，不一定非要用模态窗体。如何模拟网上有很多例子，今天就写到这里吧。有什么错误的地方请大家多指正～～

声明：本文内容来源于网络，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发邮件时，请将#更换为@进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。）