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