Main web page in standard mode, iframe in compatibility mode: any issues?
We have some legacy HTML content which we must render in compatibility mode. The requirement comes from our customers who want their HTML-based reports (some of which were created back in IE6 days) to look and print exactly the same, regardless of the browser version or underlying technologies. At the same time, we want to use Standard Mode and HTML5 for the rest of our web app.
An obvious solution is to host the legacy content in an <iframe> in compatibility mode. The following appears to work cross-browser:
main.html (in standard mode):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<style type="text/css">
body {
font-family: Arial;
font-size: 9pt;
font-style: italic;
font-weight: bold;
}
</style>
<script type="text/javascript">
window.onload = function () {
info.firstChild.data = "document.compatMode: " + document.compatMode;
// test frame's HTML5 API: document.getSelection()
setInterval(function () {
var selection = document.getElementById("contentFrame").contentDocument.getSelection();
var selectedNode = selection.focusNode;
if (selectedNode)
info2.firstChild.data = "Selected node: " + selectedNode.nodeName + ", offset: " + selection.focusOffset;
else
info2.firstChild.data = "";
}, 500);
}
</script>
</head>
<body>
<h1>Standard Mode Page</h1>
<span>body font</span>
<table border="1">
<tr>
<td>Table font</td>
</tr>
</table>
<span>body font</span>
<pre id="info"> </pre>
<pre id="info2"> </pre>
<iframe id="contentFrame" style="width: 500px; height: 300px;" src="frame.html"></iframe>
</body>
</html>
frame.html (in compatibility mode):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "">
<html>
<head>
<title></title>
<style type="text/css">
body {
font-family: Arial;
font-size: 9pt;
font-style: italic;
font-weight: bold;
}
</style>
<script type="text/javascript">
window.onload = function () {
info.firstChild.data = "document.compatMode: " + document.compatMode;
editable.focus();
}
</script>
</head>
<body>
<h1>Compatibility Mode Frame</h1>
<span>body font</span>
<table border="1">
<tr>
<td>Table font</td>
</tr>
</table>
<span>body font</span>
<pre id="info"> </pre>
<div id="editable" contentEditable="true" style="border: 1px dotted red">
Editable
</div>
</body>
</html>
Note the difference in rendering the table, using the same CSS:
My question to experienced web developers: is this a supported scenario which can be used in production environment (IE8+ mostly, but occasionally Safari/Chrome/Firefox)? Is there a better way of doing this?
I've stumbled upon a related, albeit opposite question, which left me with mixed feelings.
[UPDATE] (based on the comments):
All JavaScript resides inside the main page and appears to work just fine. What's interesting (and great!), the inner frame's view is rendered in compatibility mode, yet standard mode features are available for its DOM (at least, when accessed from the main page). E.g. document.getSelection works (and does cross-browsers, too).
By supported scenario I mean any endorsement by W3C HTML and DOM standards. So far I haven't found a definitive answer to this. This behavior may as well be just a nice side effect, although the fact it works cross-browsers is promising.
MSDN says the following: As of IE9 mode, webpages cannot display multiple document modes. For example, consider a standards-based webpage that contains a frame element that displays content in quirks mode. IE9 mode displays the child frame in standards mode (because the parent document is in standards mode). According to my tests, this is not true; my sample works as desired in IE9: the main page is in standard mode, the frame page is in quirk mode. [EDITED] As pointed out in the comments, it is the Almost Standard Mode (i.e., not the classic quirk mode), with its own rendering rules.
Answer
As of IE9 mode, webpages cannot display multiple document modes. For example, consider a standards-based webpage that contains a frame element that displays content in quirks mode. IE9 mode displays the child frame in standards mode (because the parent document is in standards mode).
According to my tests, this is not true; my sample works as desired in IE9: the main page is in standard mode, the frame page is in quirk mode.
Not quite; when your sample works as desired it's actually displayed in a single display mode, with quirks mode emulated for the frame content. You shouldn't care about the underlying mechanics as long as the resulting output matches what you were after, although there is some anecdotal evidence of differences between emulated and native modes (mostly to do with js DOM manipulation).
I'd be a bit more concerned about how IE10+ would handle such fringe scenarios:
Starting with IE11 Preview, document modes are deprecated and should no longer be used, except on a temporary basis. Make sure to update sites that rely on legacy features and document modes to reflect modern standards.
Ninja edit: looks like this has already been resolved on SO; modifying the accepted solution to your needs you should omit Doctype and add <meta http-equiv="X-UA-Compatible" content="IE=5" />; X-UA-Compatibility correctly defined as per msdn spec