Menu
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>
400
The Window. showModalDialog() creates and displays a modal dialog box containing a specified HTML document.
Creates a modal dialog and loads the specified document into it. While the modal dialog is open, the opener window cannot get the input focus and the showModalDialog method does not return. Modal dialogs are always displayed on top of their opener windows.
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
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
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
