QA@IT

IE11 ドキュメントモード=Edge の際に showModalDialogの表示がおかしくなる。

26426 PV

ASPXからjavascriptでモーダルダイアログで別ウィンドウを起動した際に、ドキュメントモード=Edgeだと引数で指定したサイズが適応されずにウィンドウが最小サイズで表示されてしまいます。
(ドキュメントモード=7では指定サイズで表示されました。)
ドキュメントモード=Edgeで指定サイズでモーダルダイアログを表示する方法を教えていただけないでしょうか?

aspx内のソース

    <script type="text/javascript">

        history.forward();

        function OpenWindow(req) {

            var pv = new Object;
            pv.Page = "./aspx/inquiry.aspx";

            rv = showModalDialog("../dialog.html", pv, "status:no;scroll:no;dialogLeft:" + (event.screenX) + "px;dialogTop:" + (event.screenY) + "px;**dialogWidth:800px**;**dialogHeight:600px**");

        }

    </script>

daialog.html

<html>
    <head>
        <title></title>
        <script>

function init(){
    top.main.location.href = dialogArguments.Page;
}


        </script>
    </head>
    <frameset border="0" frameborder="0" framespacing="0" rows="100%,*" onload="init()">
        <frame name="main" src="about:blank">
        <frame name="dummy" src="about:blank">
    </frameset>
</html>
  • 先のスレッドでもコメントしましたが、「Edgeでも正しく表示できるようにアプローチの方針を変更」ということであれば、ASP.NET Ajax Control Toolkit の ModalPopupExtender を利用することを検討されてはいかがでしょう。showModalDialog はただでさえ問題多すぎます。どうしてもそれでなければいけない理由があればお聞かせください。 -
  • くどいようですが、「Edgeでも正しく表示できるようにアプローチの方針を変更」するなら、jQuery UI の Dialog を使うという手もあります。以下のページにデモがあるので見てください。
    http://jqueryui.com/dialog/
    客の絶対的要求とかでなければ、今は showModalDialog を使う必要は全くないはずです。
    -
  • アドバイスありがとうございます。
    AjaxとjQueryで動作検証してみます。
    -
  • それがいいと思います。meta タグで互換モードを指定して表示の崩れを防ぐというやり方は、取りあえずの対症療法としてはアリかもしれませんが、将来的に meta タグでの設定はできなくなるという話もあります。今から作るアプリなら、「Edgeでも正しく表示できるようにアプローチの方針を変更」が正しい方針で、その方針で使えないshowModalDialog は使わないのが正しい選択だと思います。 -

回答

前回の質問の時にきちんと原因を突き止めてなかったためですね。

この showModalDialogが IE11モードで機能していなかったのは、framesetを利用していたからの様です。
framesetではなくbodyであれば正常に動作します。

前回の質問でドキュメントモードの差で上手く動いていましたが、
それと同等のことをするには framesetを動作させるために dialog.htmlに
<meta http-equiv="X-UA-Compatible" content="IE=7" >
を指定する必要があったという事です(今回の問題もそれで解決します)。
指定するモードは状況に応じて変更してください。
また、この指定は headのすぐ後(他のmetaタグよりも先)に追加する必要があります。

IE11のEdgeでframesetが使えるかはわかりません。
Win 8.1ならエンタープライズモードという選択肢もあるんですけどね。

私が試してみたファイルは以下になります(全て同じディレクトリに置いてください)。
metaタグの追加以外は投稿されたものと概ね同じですが最終的に呼び出すファイル、dialog.htmlのパスが異なります。
それ以外のオプション指定などは変えていません。

showModalDialogはChromeでもサポートされなくなりましたし IE11での挙動の変更も耳にしますので、
お勧めはしませんが、使われる場合はしっかりテストされたほうが良いでしょう。

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
    history.forward();
    function OpenWindow(req) {
        var pv = new Object;
        pv.Page = "./target.html";
        rv = showModalDialog("./dialog.html", pv, "status:no;scroll:no;dialogLeft:" + (event.screenX) + "px;dialogTop:" + (event.screenY) + "px;**dialogWidth:800px**;**dialogHeight:600px**");
    }
</script>
<button onClick="OpenWindow()">Open Window</button>
</body>
</html>

dialog.html

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=7" >
    <title></title>
    <script>
        function init(){
            top.main.location.href = dialogArguments.Page;
        }
    </script>
</head>
<frameset border="0" frameborder="0" framespacing="0" rows="100%,*" onload="init()">
    <frame name="main" src="about:blank">
    <frame name="dummy" src="about:blank">
</frameset>
</html>

target.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>Hello, I'm target page.</body>
</html>
編集 履歴 (3)
  • ご回答とご提案ありがとうございます。前回の質問時にも検証してみたのですが、当方の環境では何故か<meta>指定で描画モードを固定することが出来ませんでした。
    また<body>を使用するとdialog.htmlを踏み台にして別ウィンドウが起動してしまうので望ましくありません。やはりshowModalDialogは使わないほうがいいのでしょうね。
    -
  • 検証時の状況が良くわかりませんがマシン名指定の時にaspxではなくdialog.htmlにmeta指定してダメでしたか?
    違うaspxページの内容を表示できるようにするのは大変そうに思いますが、修正期間が十分あるなら変えてしまった方がいいでしょうね。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。