Página web principal en modo estándar, iframe en modo de compatibilidad: ¿problemas?

Question

Sep 24, 2013, 10:11 AM

iframe html5 html compatibility javascript

Página web principal en modo estándar, iframe en modo de compatibilidad: ¿problemas?

Tenemos algunos contenidos HTML heredados que debemos representar en modo de compatibilidad. El requisito proviene de nuestros clientes que desean que sus informes basados en HTML (algunos de los cuales se crearon en IE6 días) se vean e impriman exactamente igual, independientemente de la versión del navegador o las tecnologías subyacentes. Al mismo tiempo, queremos utilizar el Modo estándar y HTML5 para el resto de nuestra aplicación web.

Una solución obvia es alojar el contenido legado en un<iframe> en modo de compatibilidad. Lo siguiente parece funcionar en varios navegadores:

main.html (en modo estándar):

<!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">&nbsp;</pre>
    <pre id="info2">&nbsp;</pre>
    <iframe id="contentFrame" style="width: 500px; height: 300px;" src="frame.html"></iframe>
</body>
</html>

frame.html (en modo de compatibilidad):

<!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">&nbsp;</pre>
    <div id="editable" contentEditable="true" style="border: 1px dotted red">
        Editable
    </div>
</body>
</html>

Tenga en cuenta la diferencia en la prestación de latable, utilizando el mismo CSS:

Mi pregunta a los desarrolladores web con experiencia:¿Es este un escenario soportado? ¿Qué se puede usar en el entorno de producción (en su mayoría IE8 +, pero ocasionalmente Safari / Chrome / Firefox)?¿Hay una mejor manera de hacer esto?

Me he topado con una relacionada, aunque opuestapregunta, lo que me dejó con sentimientos encontrados.

[ACTUALIZAR] (basado en los comentarios):

Todo el JavaScript reside dentro de la página principal y parece funcionar bien. Lo que es interesante (¡y genial!), La vista del marco interno se representa en modo de compatibilidad,sin embargo, las características del modo estándar están disponibles para su DOM (Al menos, cuando se accede desde la página principal). P.ej.document.getSelection Funciona (y hace navegadores cruzados, también).

Porescenario soportado Me refiero a cualquier aprobación por los estándares W3C HTML y DOM. Hasta ahora no he encontrado una respuesta definitiva a esto. Este comportamiento también puede ser un efecto secundario agradable, aunque el hecho de que funcione en los navegadores cruzados es prometedor.

MSDN Dice lo siguiente:A partir del modo IE9, las páginas web no pueden mostrar varios modos de documento. Por ejemplo, considere una página web basada en estándares que contenga un elemento de marco que muestre el contenido en modo peculiar. El modo IE9 muestra el marco secundario en modo estándar (porque el documento principal está en modo estándar). Según mis pruebas,esto no es verdad; Mi muestra funciona como se desea en IE9: la página principal está en modo estándar, la página de marco está en modo peculiar.[Editado] Como se señala en los comentarios, es elModo casi estándar (es decir, no el modo de peculiaridad clásico), con sureglas de representación propias.