ChromeはshowModalDialogモダリティダイアログボックスとreturnValue問題の解決方法をサポートしていません

3056 ワード

What?モードダイアログボックスが無効になりましたか?
先週、テストのバックグラウンド管理項目を変更し、各ブラウザとの互換性をテストしたところ、chromeブラウザの下でshowModalDialogメソッドが表示されているのはモデリングダイアログボックスではなく、新しいページを開くように、親ウィンドウは任意にフォーカスポイントを取得し、複数のフォームを開くことができ、戻り値returnValueも戻ることができず、undefinedだったことがわかりました.こんなに多くの問題が頭を悩ませているので、主流の最新版のブラウザについてテストしてみました.
エクスプローラ
サポートするかどうか
≪ステータス|Status|emdw≫
IE9

Firefox13.0

safari5.1

chrome19.0
×
モデリングダイアログではなくopenの新しいフォームです
Opera12.0
×
何も起こらず、フォームも弾かない.
Chromeはいったい何を開けたのか
モードダイアログではなくopenの新しいフォームのように開いているので、フォームwindowを検証するだけです.Openerが空かどうかは分かります.


    alert(window.opener);

chromeでは[object window]オブジェクトが表示され、IEはundefinedです.今はchromeがshowModalDialogをwindowとしていたことを知っています.Openが処理しました.つまりwindowを使うことができますOpenerはchromeブラウザのサブフォームを操作します.ここでは興味深い現象も発見され、firefoxでwindowをテストしました.Openerも空ではないので、showModalDialogを使用してサブフォームでwindowについてテストしました.OpenerとwindowdialogArgumentsの各ブラウザでの状況は,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に追加
親フォーム部分jsコード:

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

  alert(returnValue);
}

サブフォーム部分jsコード:

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でページ内で1つのフォームをシミュレートして、スタイルはカスタマイズして、インタラクションはすべてとても良くて、必ずしもモダリティのフォームを使う必要はありませんて、どのようにネット上の一大をシミュレートして、今日ここまで书いて、どんな间违いがある地方はみんなに多く指摘してもらいます~~