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.
