【发布时间】：2013-09-29 08:24:54
【问题描述】：
我们有一些遗留的 HTML 内容，我们必须以兼容模式呈现。我们的客户要求他们的基于 HTML 的报告（其中一些是在 IE6 时代创建的）外观和打印完全相同，而不管浏览器版本或底层技术如何。同时，我们希望在我们的网络应用程序的其余部分使用标准模式和 HTML5。
一个明显的解决方案是以兼容模式在<iframe> 中托管旧内容。以下似乎可以跨浏览器工作：
main.html（在标准模式下）：
<!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（在兼容模式下）：
<!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>
注意使用相同 CSS 渲染 table 的区别：
我对有经验的网络开发人员的问题：这是一个受支持的场景，可以在生产环境中使用（主要是 IE8+，但偶尔是 Safari/Chrome/Firefox）？ 有更好的方法吗？
我偶然发现了一个相关的，虽然是相反的question，这让我百感交集。
[UPDATE]（基于 cmets）：
所有 JavaScript 都驻留在主页面中，并且看起来运行良好。有趣的是（而且很棒！），内部框架的视图以兼容模式呈现，但其 DOM 可以使用标准模式功能（至少在从主页访问时）。例如。 document.getSelection 有效（也可以跨浏览器）。
支持的场景我指的是 W3C HTML 和 DOM 标准的任何认可。到目前为止，我还没有找到一个明确的答案。这种行为也可能只是一个很好的副作用，尽管它跨浏览器工作的事实很有希望。
MSDN 表示：在 IE9 模式下，网页无法显示多个文档模式。例如，考虑一个基于标准的网页，该网页包含一个以 quirks 模式显示内容的框架元素。 IE9 模式以标准模式显示子框架（因为父文档处于标准模式）。 根据我的测试，这不是真的；我的示例在 IE9 中按需要工作：主页处于标准模式，框架页面处于 quirk 模式。 [EDITED] 正如 cmets 中所指出的，它是 Almost Standard Mode（即，不是经典的怪癖模式），带有 own rendering rules。
【问题讨论】：
-
我不明白为什么这个组合会造成任何麻烦。但是，不确定不同版本的 javascript 环境将如何交互。
-
@JanDvorak，所有的 JavaScript 都驻留在首页，看起来运行良好。有趣的是（而且很棒！），内部框架的视图以 quirk 模式呈现，但其 DOM 仍然可以使用标准模式功能（至少，从主页访问它时）。例如。 document.getSelection 有效（也可以跨浏览器）。
-
有趣 - 现在你让我想自己运行一堆测试。当我得到一些结论时，我什至可能会在这里报告。
-
您的内页以一种称为“几乎标准模式”的方式呈现，请参见此处：msdn.microsoft.com/en-us/library/ff405912(v=vs.85).aspx。所以你可能会在你的内部框架中获得标准模式 DOM 和更正 CSS 行为而不是怪癖。
-
@Noseratio，我很高兴它有效。我很遗憾为我们提供的用于在 IE 上运行的文档通常不是在测试中产生的。然而，他们所说的与实际执行方式之间的不一致通常表明某些内容会在新版本中发生变化，因此不应依赖。祝你好运，谢谢！
标签： javascript html iframe compatibility