Question

请参阅下面的更新（11/27）

我有一个模态窗口，它在iframe（ASP webforms应用程序）中使用它的内容启动。我们需要将模式重定向到另一个页面，但由于安全原因（Paypal处理页面），它不能在iframe中。在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，问题示例：

Interactive Example （需要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>

Answer 1

您的问题出现是因为您使用的showModalDialog在使用IE时会引入此行为。

你可以在这里阅读：

showModalDialog Opens a New Window

如果您想继续使用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

在showModalDialog;在IE中打开一个新窗口

1 个答案: