标准模式下的主网页，兼容模式下的iframe：是否有问题？ [英] Main web page in standard mode, iframe in compatibility mode: any issues?
问题描述
我们有一些遗留的HTML内容，我们必须以兼容模式呈现。我们的客户希望他们的基于HTML的报告（其中一些是在IE6天内创建的）无论浏览器版本或基础技术如何，都可以查看和打印完全相同的内容。同时，我们希望为我们的其他应用程序使用标准模式和HTML5。
一个明显的解决方案是将传统内容托管在< iframe> 在兼容模式下。以下内容似乎适用于跨浏览器：
main.html （在标准模式下）：
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =X-UA-Compatiblecontent =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;
//测试框架的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>标准模式页面< / h1>
< span>正文字体< / span>
< table border =1>
< tr>
< td>表格字体< / td>
< / tr>
< / table>
< span>正文字体< / span>
< pre id =info>& nbsp;< / pre>
< pre id =info2>& nbsp;< / pre>
< iframe id =contentFramestyle =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>兼容模式帧< / h1>
< span>正文字体< / span>
< table border =1>
< tr>
< td>表格字体< / td>
< / tr>
< / table>
< span>正文字体< / span>
< pre id =info>& nbsp;< / pre>
< div id =editablecontentEditable =truestyle =border：1px dotted red>
可编辑
< / div>
< / body>
< / html>
请注意渲染表 ，使用相同的CSS：
我对有经验的网页开发人员提出的问题：这是支持的方案可以在生产环境中使用（主要是IE8 +，但偶尔会使用Safari / Chrome / Firefox）？ 有没有更好的方法来做到这一点？ 我已经偶然发现了一个相关的，但相反的问题，其中
$ b
[UPDATE] （基于评论）：
所有的JavaScript驻留在主页面内，看起来工作得很好。有趣的是，内框的视图以兼容模式呈现，标准模式功能可用于其DOM （至少从主页面访问时）。例如。 document.getSelection works （也支持跨浏览器）。
受支持的场景我的意思是W3C HTML和DOM标准的任何认可。到目前为止，我还没有找到明确的答案。这种行为可能只是一个很好的副作用，尽管它在跨浏览器中起作用是有希望的。
MSDN 说明如下：截至IE9模式，网页无法显示多个文件模式。例如，考虑一个基于标准的网页，其中包含一个以怪癖模式显示内容的框架元素。 IE9模式以标准模式显示子框架（因为父文档处于标准模式）。根据我的测试，这不是真的;我的示例在IE9中按照需要工作：主页面处于标准模式，框架页面处于怪异模式。 正如评论中指出的，它是几乎标准模式（即不是经典的奇怪模式），其自己的渲染规则。 解决方案
< blockquote>
自IE9模式开始，网页无法显示多种文档模式。例如，考虑一个基于标准的网页，其中包含一个框架
元素，以怪癖模式显示内容。 IE9模式在标准模式下显示
子框架（因为父文档处于
标准模式）。
根据我的测试，这是不正确的;我的示例
在IE9中按照需要工作：主页处于标准模式，框架
页面处于奇怪模式。
不完全;当您的示例按需运行时，它实际上会以单一显示模式显示， with quirks mode 。只要产生的输出与您之前的输出相匹配，您就不应该关心底层机制，尽管模拟和本机模式之间存在一些差异的证据（主要是与js DOM操作有关）。
我会更关心 IE10 +如何处理这样的边缘情况：
$ b
从IE11 Preview开始，文档模式已被弃用，并且
no除暂时使用外，应更长时间使用。请务必更新
网站，这些网站依靠旧版功能和文档模式来反映
现代标准。
<忍者编辑：看起来像这已经在SO上得到解决;修改接受的解决方案以满足您的需求，您应该省略Doctype并添加< meta http-equiv =X-UA-Compatiblecontent =IE = 5/> ; X-UA-Compatibility 正确定义为 msdn spec
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.
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
这篇关于标准模式下的主网页，兼容模式下的iframe：是否有问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
