У нас есть некоторый унаследованный 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 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:
Мой вопрос к опытным веб-разработчикам: - это поддерживаемый сценарий, который можно использовать в рабочей среде (IE8 + в основном, но иногда Safari/Chrome/Firefox)? Есть ли лучший способ сделать это?
Я наткнулся на связанный, хотя и противоположный question, который оставил меня со смешанными чувствами.
[ОБНОВЛЕНИЕ] (на основе комментариев):
Весь JavaScript находится внутри главной страницы и, похоже, работает нормально. Что интересно (и отлично!), Внутреннее представление кадра отображается в режиме совместимости, , но функции стандартного режима доступны для DOM (по крайней мере, при доступе с главной страницы). Например. document.getSelection работает (и делает перекрестные браузеры тоже).
По поддерживаемому сценарию Я имею в виду любое одобрение стандартов W3C HTML и DOM. До сих пор я не нашел окончательного ответа на этот вопрос. Такое поведение может быть просто хорошим побочным эффектом, хотя факт, что он работает с кросс-браузерами, является многообещающим.
MSDN говорит следующее: с режима IE9 веб-страницы не могут отображать несколько режимов документа. Например, рассмотрите веб-страницу, основанную на стандартах, которая содержит элемент фрейма, который отображает контент в режиме quirks. Режим IE9 отображает дочерний кадр в стандартном режиме (поскольку родительский документ находится в стандартном режиме). Согласно моим тестам, это неверно; мой пример работает по желанию в IE9: главная страница находится в стандартном режиме, страница фрейма находится в режиме quirk. [EDITED] Как отмечалось в комментариях, это Почти стандартный режим (т.е. не классическая причуда mode), с собственные правила рендеринга.
