标准模式下的主网页,兼容模式下的iframe:任何问题？
nos*_*tio 26 html javascript iframe html5 compatibility
我们有一些遗留的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>
注意table使用相同的CSS 渲染的区别:
我向经验丰富的Web开发人员提出的问题是:这是一个支持的场景,可以在生产环境中使用(主要是IE8 +,但偶尔会使用Safari/Chrome/Firefox)？有没有更好的方法呢？
我偶然发现了一个相反但相反的问题,这让我感到很复杂.
[更新](根据评论):
所有JavaScript都驻留在主页面内,看起来效果很好.有趣的是(并且很棒!),内部框架的视图以兼容模式呈现,但标准模式功能可用于其DOM(至少,从主页面访问时).例如,document.getSelection可以工作(并且也可以使用跨浏览器).
根据支持的方案,我的意思是W3C HTML和DOM标准的任何认可.到目前为止,我还没有找到明确的答案.这种行为可能只是一个很好的副作用,虽然它跨浏览器工作的事实是有希望的.
MSDN说明如下:从IE9模式开始,网页无法显示多种文档模式.例如,考虑一个基于标准的网页,其中包含以怪异模式显示内容的框架元素.IE9模式以标准模式显示子帧(因为父文档处于标准模式).根据我的测试,这不是真的 ; 我的示例在IE9中按照需要工作:主页面处于标准模式,框架页面处于怪癖模式.[编辑]正如评论中指出的那样,它是几乎标准模式(即,不是经典的怪癖模式),具有自己的渲染规则.
从IE9模式开始,网页无法显示多种文档模式.例如,考虑一个基于标准的网页,其中包含以怪异模式显示内容的框架元素.IE9模式以标准模式显示子帧(因为父文档处于标准模式).
根据我的测试,这不是真的 ; 我的示例在IE9中按照需要工作:主页面处于标准模式,框架页面处于怪癖模式.
不完全的; 当您的样本按照需要工作时,它实际上以单一显示模式显示,并为帧内容模拟了怪癖模式.只要结果输出与之后的输出相匹配,您就不应该关心底层的机制,尽管有一些轶事证据表明模拟和本机模式之间存在差异(主要与js DOM操作有关).
我会更关注IE10 +如何处理这样的边缘场景:
从IE11 Preview开始,不推荐使用文档模式,不应再使用它们,临时情况除外.确保更新依赖于旧版功能和文档模式的站点以反映现代标准.
Ninja编辑:看起来这已经在SO上解决了 ; 根据您的需要修改已接受的解决方案,您应该省略Doctype并添加<meta http-equiv="X-UA-Compatible" content="IE=5" />; X-UA-Compatibility根据msdn规范正确定义
- 由于我刚才在答案中评论的原因,我正在推荐这个答案.如果您的主要目标是互联网,则最好使用HTML解决方案.我个人不喜欢用这种特定的敏捷性来躲避IE漏洞.但是你的语气暗示IE是主要目标.如果您没有更正旧版IE的输出,我建议收集使用数据以确定会影响多少流量.它可能小到不能保证时间投入. (2认同)