显示模态对话;在 IE 中打开一个新窗口

showModalDialog; Opens a New Window in IE

本文关键字：新窗口 窗口 一个 对话 模态 IE 显示      更新时间：2023-09-26

请参阅下面的更新(11/27(

我有一个模式窗口，它的内容在 iframe(ASP 网络表单应用程序(中启动。我们需要将模式重定向到另一个页面，但由于安全原因(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，包含问题示例：

交互式示例(需要IE10+或任何好的浏览器(

以下是该问题的示例，所有设置都按照我们的方式设置。当模式处于 IE 兼容模式时，它会打开一个新窗口，而不是重定向模式。将页面固定为兼容模式并非易事，因为我们的应用程序依赖于兼容模式，并且外部模式页面在任何地方都广泛使用。在FireFox中查看页面(main.html((Chrome存在域安全问题(，它按预期工作;模式将完全重定向到新页面。

主.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>

莫代尔.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>

框架.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>

另一页.html

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

出现您的问题是因为您正在使用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

相关文章：