Główna strona internetowa w trybie standardowym, iframe w trybie zgodności: wszelkie problemy?

Question

Sep 24, 2013, 10:11 AM

javascript compatibility html iframe html5

Główna strona internetowa w trybie standardowym, iframe w trybie zgodności: wszelkie problemy?

Mamy trochę starszej treści HTML, którą musimy renderować w trybie zgodności. Wymóg ten pochodzi od naszych klientów, którzy chcą, aby ich raporty w formacie HTML (niektóre z nich zostały utworzone w IE6 dni) wyglądały i drukowały dokładnie tak samo, niezależnie od wersji przeglądarki lub technologii bazowych. Jednocześnie chcemy używać trybu standardowego i HTML5 do reszty naszej aplikacji internetowej.

Oczywistym rozwiązaniem jest hostowanie starszej zawartości w<iframe> w trybie zgodności. Wygląda na to, że działa następująca przeglądarka:

main.html (w trybie standardowym):

<!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 (w trybie zgodności):

<!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>

Zwróć uwagę na różnicę w renderowaniutable, używając tego samego CSS:

Moje pytanie do doświadczonych programistów:czy jest to obsługiwany scenariusz które mogą być używane w środowisku produkcyjnym (głównie IE8 +, ale czasami Safari / Chrome / Firefox)?Czy jest na to lepszy sposób?

Natknąłem się na pokrewny, choć przeciwnypytanie, co pozostawiło mnie z mieszanymi uczuciami.

[AKTUALIZACJA] (na podstawie komentarzy):

Cały JavaScript znajduje się na stronie głównej i wydaje się działać dobrze. Co ciekawe (i świetnie!), Widok wewnętrznej ramki jest renderowany w trybie zgodności,jednak standardowe funkcje trybu są dostępne dla jego DOM (przynajmniej, gdy dostęp do strony głównej). Na przykład.document.getSelection działa (i działa również w wielu przeglądarkach).

Przezobsługiwany scenariusz Mam na myśli wszelkie poparcie dla standardów HTML i DOM W3C. Do tej pory nie znalazłem ostatecznej odpowiedzi na to pytanie. Takie zachowanie może być również dobrym efektem ubocznym, chociaż fakt, że działa on w wielu przeglądarkach, jest obiecujący.

MSDN mówi co następuje:W trybie IE9 strony internetowe nie mogą wyświetlać wielu trybów dokumentów. Na przykład rozważ stronę opartą na standardach, która zawiera element ramki, który wyświetla zawartość w trybie dziwactwa. Tryb IE9 wyświetla ramkę podrzędną w trybie standardowym (ponieważ dokument nadrzędny jest w trybie standardowym). Według moich testów,to nie jest prawda; moja próbka działa zgodnie z oczekiwaniami w IE9: strona główna jest w trybie standardowym, strona ramki jest w trybie dziwacznym.[EDITED] Jak wskazano w komentarzach, jest toTryb prawie standardowy (tj. nie klasyczny tryb dziwactwa), z jegowłasne reguły renderowania.