Internet Explorer 9 ignores dialogWidth/Height for showModalDialog with a frameset

问题

I've got an older intranet application that needs to show two frames (a fixed menu bar and a variable content data view) inside a modal dialog window. At the moment the dialog is opened using the window.showModalDialog function and everything works fine, as long as I'm opening the page in Internet Explorer 8 (with any view mode) or in Internet Explorer 9 with Compatibility View enabled.

Unfortunately, when switching off the Compatibility View in IE9, the dialog window always opens in a size of 266 x 138 pixels, regardless of the specified dialogWidth and dialogHeight values. I created a small example showing the problem:

index.html (the page initially loaded):

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
    <input type="button" value="popup" 
        onclick="showModalDialog ('dialog.html', null, 'dialogWidth:500px;dialogHeight:400px;resizable:yes')" />
</body>
</html>

dialog.html (the page opened inside the dialog window):

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<frameset rows="*, 70">
    <frame src="frame1.html" />
    <frame src="frame2.html" />
</frameset>
</html>

frame1.html/frame2.html (the content of both frames):

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
    <p>Frame Content</p>
</body>
</html>

The problem only occurs if I'm showing a frameset document inside the dialog. When opening a regular html document (containing a body with some content), the size is set as specified in the function call.

Also, changing the dialog size after the document has loaded only works for regular documents, not for framesets, f.e. insert the following code after the opening html tag in dialog.html:

<head>
    <script type="text/javascript" />
        window.setTimeout (function () { window.dialogWidth = "500px"; window.dialogHeight = "400px"; }, 10000);
    </script>
</head>

As I don't want to change the overall structure of the application (especially the frame-basedness) and I don't know if I'm doing something wrong or if I've found a bug in Internet Explorer, any hints for resolving this problem are welcome.

回答1:

The same issue I also faced, finally it worked for me by change the meta tag compatibility to ie8.

Remove all those doctype's in model dialog and just add the meta tag like

"&nlt; meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8 &ngt;"

i hope this will help.

回答2:

I also discussed the issue on the Internet Explorer Web Development Forum and was able to get a solution that I want to share here:

According to Microsoft Connect, Testing was able to verify that this issue was resolved in Internet Explorer 10 on Windows 8 Developer.

For IE9 the problem could be bypassed by removing the doctype declaration inside dialog.html. This forces this particular page into Quirks mode but then the dialog is shown in the right size again.

回答3:

Add this code to dialog.html

<head>
    <script>
    (function () {
        var _b = document.createElement('body');
        var _doc = document.documentElement;
        _doc.insertBefore(_b, _doc.firstChild );
        _doc.removeChild(_b);
    })();
    </script>
</head>

来源：https://stackoverflow.com/questions/9067667/internet-explorer-9-ignores-dialogwidth-height-for-showmodaldialog-with-a-frames

标签

internet-explorer

size

modal-dialog

frameset