web-dev-qa-db-ja.com

標準モードのメインWebページ、互換モードのiframe：問題はありますか？

互換モードでレンダリングする必要があるレガシーHTMLコンテンツがいくつかあります。要件は、ブラウザーのバージョンや基盤となるテクノロジーに関係なく、HTMLベースのレポート（一部はIE6時代に作成されたもの）をまったく同じように表示および印刷したいというお客様からの要求です。同時に、Webアプリの残りの部分には標準モードと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">&nbsp;</pre>
    <pre id="info2">&nbsp;</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">&nbsp;</pre>
    <div id="editable" contentEditable="true" style="border: 1px dotted red">
        Editable
    </div>
</body>
</html>

同じCSSを使用して、tableのレンダリングの違いに注意してください。

Standard and compatibility mode mix

経験豊富なウェブ開発者への私の質問：これは、本番環境で使用できるサポートされているシナリオですか？ これを行うより良い方法はありますか？

question の反対にもかかわらず、私は関連するものにつまずきました。

[UPDATE]（コメントに基づく）：

すべてのJavaScriptはメインページ内にあり、正常に動作するようです。おもしろい（そして素晴らしい！）、内部フレームのビューは互換モードでレンダリングされます。まだDOMで標準モード機能が利用可能です（少なくとも、メインページからアクセスします）。例えば。 document.getSelection は動作します（クロスブラウザも動作します）。

サポートされているシナリオでは、W3C HTMLおよびDOM標準による承認を意味します。これまでのところ、これに対する決定的な答えは見つかりませんでした。この動作はニースの副作用である可能性もありますが、クロスブラウザで機能するという事実は有望です。

[〜＃〜] msdn [〜＃〜] は次のように言います：IE9モードの時点で、Webページは複数のドキュメントモードを表示できません。たとえば、コンテンツを奇抜モードで表示するフレーム要素を含む標準ベースのWebページを考えてみましょう。 IE9モードでは、子フレームが標準モードで表示されます（親ドキュメントが標準モードであるため）。私のテストによると、これは真実ではありません;私のサンプルはIE9で希望どおりに動作します。メインページは標準モードで、フレームページは奇抜なモードです。 [編集済み]コメントで指摘したように、それは Almost Standard Mode （つまり、従来のQuirkモードではありません）です。 、 独自のレンダリングルール 。

javascripthtmlhtml5iframecompatibility
26
noseratio

IE9モードでは、Webページは複数のドキュメントモードを表示できません。たとえば、コンテンツを奇抜モードで表示するフレーム要素を含む標準ベースのWebページを考えてみましょう。 IE9モードは、親フレームが標準モードであるため、子フレームを標準モードで表示します。

私のテストによると、これは真実ではありません;私のサンプルはIE9で希望どおりに動作します。メインページは標準モードで、フレームページは奇抜なモードです。

そうではありません。サンプルが希望どおりに機能する場合、実際にはシングル表示モードで表示されます。 quirksモードでエミュレートフレームコンテンツ 。エミュレートモードとネイティブモードの違いの逸話的な証拠がありますが（主にjs DOM操作に関係します）、結果の出力が目的のものと一致する限り、基礎となるメカニズムを気にする必要はありません。

私は IE10 +がこのようなフリンジシナリオをどのように処理するかについて少し心配になるでしょう ：

IE11プレビュー以降、ドキュメントモードは非推奨であり、一時的な場合を除き、使用しないでください。最新の標準を反映するために、レガシー機能とドキュメントモードに依存するサイトを必ず更新してください。

Ninja edit：は のように見えます。これはSO で既に解決されています。受け入れられているソリューションをニーズに合わせて変更するには、Doctypeを省略して<meta http-equiv="X-UA-Compatible" content="IE=5" />; X-UA-Compatibilitymsdn spec に従って正しく定義されています

8
o.v.

これは、少し特定性の低い質問に対する疑似回答です。

このIE "back-compatibility"の機能に頼る不安については、私は同じように感じています。Microsoftはこのオプションを提供しています。 Webコンテンツを更新する時間このオプションは、永続的な解決策ではなく、迅速で汚れたストップギャップを持たせることを目的としています。

だから、永続的な解決策は何ですか？それがあなたの質問なら、IMOこれが答えです。ストップギャップに頼らずに、レポートの正しい出力を作成してください。

それらのレポートが何であるかを知らずに、その部分について適切にアドバイスすることは不可能ですが、ここでは暗闇の中で突き刺します。

「HTML」をPDFに変換する多くのオプションがあります。 （各レンダリングエンジンはHTMLの異なるバージョン/標準を必要とするため、HTMLを引用符で囲みます。選択する前にこれらの前提を知る必要があります。）どのブラウザーでも100％同じフォーマットの出力が必要な場合は、次に、静的ではなく、変更されることを意図した形式が必要です。 PDFが好きです。さらに、印刷オプションも同様に処理されます。

2
Luke