showModalDialog; Opens a New Window in IE

StackOverflow https://stackoverflow.com/questions/20200710

Question

Please see update (11/27) below

I have a modal window that is launched with it's content in an iframe (ASP webforms application). We need to have the modal redirect to another page, but it cannot be within the iframe due to security reasons (Paypal processing page). In Chrome and IE standards mode, we have code that properly changes the modal's URL to the right one. However in compatibility mode, the redirect causes a new modal window to open with the correct URL. How can we stop it from opening a new window and actually redirecting?

This is our current code:

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);
        }
    };

Update 11/27, with example of issue:

Interactive Example (Requires IE10+ or any good browser)

The following is an example of the issue, with everything set up how we have it. When the modal is in IE compatibility mode, it opens a new window instead of redirecting the modal. Fixing the page to be in compatibility mode is not an easy process, as our application relies on compatibility mode and the outer modal page is used extensively everywhere. Viewing the page (main.html) in FireFox (Chrome has that domain security issue), it works as expected; the modal is completely redirected to the new page.

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>
Was it helpful?

Solution

Your issue arises because you are using showModalDialog which introduces this behavior when using IE.

You can read about it here:

showModalDialog Opens a New Window

If you want to continue using showModalDialog here is a work around:

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(); 
}

Example

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top