5

以下のアップデート(11/27)を参照してください

iframe (ASP webforms アプリケーション) のコンテンツで起動されるモーダル ウィンドウがあります。モーダルを別のページにリダイレクトする必要がありますが、セキュリティ上の理由から iframe 内にリダイレクトすることはできません (Paypal 処理ページ)。Chrome および IE 標準モードでは、モーダルの URL を適切な URL に適切に変更するコードがあります。ただし、互換モードでは、リダイレクトにより新しいモーダル ウィンドウが正しい URL で開きます。新しいウィンドウを開いて実際にリダイレクトしないようにするにはどうすればよいでしょうか?

これが現在のコードです。

dialog.redirect = function (location, ignoreFrames) {
        /// <summary>Redirects the dialog to a new URL</summary>
        /// <param name="location" type="String"></param>
        /// <param name="ignoreFrames" type="Boolean">If true, the dialog's URL will be changed instead of any parent frame URLs</param>

        if (ignoreFrames === undefined) {
            ignoreFrames = true;
        }

        if (ignoreFrames === true) {
            if (window.top) {
                //Chrome and IE9+
                window.top.document.location.replace(location);
            } else {
                //This was a supposed fix but it did not change the outcome
                //<IE8 and compat mode
                var redirectLink = document.createElement("a");
                redirectLink.href = location;
                document.body.appendChild(redirectLink);
                redirectLink.click();
            }
        } else {
            window.document.location.replace(location);
        }
    };

11/27 を更新、問題の例:

インタラクティブな例(IE10+ または適切なブラウザーが必要)

以下は問題の例で、すべてがどのように設定されているかを示しています。モーダルが IE 互換モードの場合、モーダルをリダイレクトする代わりに、新しいウィンドウが開きます。ページを互換モードに修正するのは簡単なプロセスではありません。アプリケーションは互換モードに依存しており、外側のモーダル ページはどこでも広く使用されているからです。FireFox でページ (main.html) を表示すると (Chrome にはドメイン セキュリティの問題があります)、期待どおりに動作します。モーダルは完全に新しいページにリダイレクトされます。

main.html

<html>
<head></head>
<body>
    <a href="javascript:window.showModalDialog('modal.html', self, 'status:no;resizable:yes;help:no;scroll:no;width:1000;height:600')">Open Modal</a>
</body>
</html>

modal.html

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
    <head>
        <title id="tagTitle"></title>
    </head>
    <body style="margin:0px">     
        <form name="Form1" method="post" action="" id="Form1">
            <strong>modal.html</strong><br />
            <iframe frameborder="1" src="frame.html" scrolling="yes"></iframe>
        </form>
    </body>
</html>

frame.html

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="" xmlns="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<strong>frame.html</strong><br />
<a href="javascript:void(0)" onclick="redirectToCart();" title="My Cart">Trigger Redirect</a>

<script type="text/javascript">
    var redirect = function (location, ignoreFrames) {
        /// <summary>Redirects the dialog to a new URL</summary>
        /// <param name="location" type="String"></param>
        /// <param name="ignoreFrames" type="Boolean">If true, the dialog's URL will be changed instead of any parent frame URLs</param>

        if (ignoreFrames === undefined) {
            ignoreFrames = true;
        }

        if (ignoreFrames === true) {
            window.top.document.location.replace(location); //IE will create a new window at this point, instead of changing the modal's URL
        } else {
            window.document.location.replace(location);
        }
    };

    function redirectToCart() {
        redirect('anotherpage.html', true); //Change this to false to see just the inner frame's URL change
    }
</script>
</body>
</html>

anotherpage.html

<html>
<head>

</head>
<body>
    <strong>anotherpage.html</strong><br />
    Success
</body>
</html>
4

1 に答える 1

7

showModalDialogを使用すると、この動作が導入される を使用しているため、問題が発生しますIE

ここでそれについて読むことができます:

showModalDialog 新しいウィンドウを開く

ここで引き続き使用したい場合showModalDialogは、次の回避策があります。

modal.html

<head>
    <base target="_self" />
    ...
</head>
<body style="margin:0px">     
        ....
        <a href="anotherpage.html" id="go" style="display:none;"></a>
    </form>
</body>

frame.html

function redirectToCart() {
    window.parent.document.getElementById('go').click(); 
}

http://plnkr.co/edit/ClxlWqkzBmTy93kJzuru?p=preview

于 2013-11-27T21:12:46.417 に答える