ChromeはshowModalDialogモーダルダイアログをサポートせず、returnValueが返されない問題の解決方法

What?模态ダイアログが無効になりました?

先週、バックエンド管理プロジェクトのテスト中に、各ブラウザの互換性をテストしていました。ChromeブラウザではshowModalDialogメソッドが模态ダイアログを表示せず、新しいページのように感じます。親ウィンドウは焦点を自由に取得し、複数のウィンドウを開くことができます。また、returnValueもundefinedで常に返されません。これらの問題は非常に頭痛の種でした。以下に、主要な最新版ブラウザのテスト結果を示します。

ブラウザ	サポート	状態
IE9	○
Firefox13.0	○
safari5.1	○
chrome19.0	×	模态ダイアログではありません。openで新しいウィンドウが開かれました
Opera12.0	×	何も起こらず、ウィンドウが弹出しません

Chromeが実際に何を開いているのか

模态ダイアログを開いていないため、新しいウィンドウとして開いたように感じるので、サブウィンドウのwindow.openerが空かどうかを確認するだけで理解できます。

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

Chromeブラウザでは[object window]オブジェクトが表示され、IEではundefinedです。今まで知らなかったことですが、ChromeはshowModalDialogをwindow.openと同じように処理していることが分かりました。つまり、Chromeブラウザのサブウィンドウをwindow.openerで操作することができます。面白い現象を見つけました。Firefoxではwindow.openerも空ではありません。そこで、showModalDialogを使用してサブウィンドウ内のwindow.openerとwindow.dialogArgumentsについて、各ブラウザでの状況をテストしました。Operaブラウザではウィンドウが弹出しませんので、以下のテストから除外しました。

以下は、パレットウィンドウの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

パレットウィンドウ部分のJavaScriptコード：

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

サブウィンドウ部分のJavaScriptコード：

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（メール送信時は、#を@に置き換えてください。申し訳ありませんが、関連する証拠を提供していただければ、当サイトは直ちに侵害する疑いのあるコンテンツを削除します。）