javascript - IE9を使用したXMLデータアイランドの更新

Question

私はIE6のみの内部レガシーWebサイトに取り組んでいます。XMLデータアイランド固有のスクリプトを使用しているため、IE8/9は失敗します。目標は、IE9で表示できるようにサイトを変更することです。他のブラウザは問題ではありません。

数千ページ以上の100以上のJSファイルがあるため、ここでのもう1つの目標は、すべてを書き直すことではなく、IE9でサイトを有効にするためにできることを修正することです。

これを正しく行っているかどうかは完全にはわかりませんが、以下は典型的なページレイアウトの例です。何が機能していて何が機能していないかを示すために、それを小さなテストにまとめました。

作品

XMLデータアイランドの初期バインディング。
1つのXML要素が更新されると、同じXML要素がページの他の場所で更新されます（2つの入力フィールドの一方の値を変更すると、フォーカスが失われると、もう一方の入力フィールドがスイートに従います）。

動作しない

値が変更された後のXMLデータアイランドの値の取得（少なくとも私が試みた方法）。
XMLデータアイランドにバインドされているフィールドを埋め込みXMLと同期させます。

問題を再現する手順

（ok）メッセージの表示ボタンをクリックすると、埋め込まれたxmlの値が正しく表示されます。
（ok）入力フィールドの1つで値を変更します。もう一方は正しく更新されます。
（OKではありません）メッセージの表示ボタンをもう一度クリックします。メッセージの新しい値は更新されません。
（1/2 ok）メッセージの変更ボタンをクリックすると、XMLが更新されます。ただし、XMLデータアイランドにバインドされている入力フィールドは更新されません。
（ok）メッセージの表示ボタンをもう一度クリックします。XMLの値を更新したスクリプトが正しく表示されます。

サンプル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <title>Data Islands</title>

    <xml id="ResultsIsland">
        <result>
            <msg>Initial Message</msg>
        </result>
    </xml>

    <script type="text/javascript">
        function modifyDataIsland() {
            var dataIsland = document.getElementById("ResultsIsland");
            var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.loadXML(dataIsland.innerHTML);

            var xmlRoot = xmlDoc.documentElement;
            xmlRoot.getElementsByTagName("msg")[0].text = new Date();
            dataIsland.innerHTML = xmlDoc.xml;

            alert("msg element updated to: " + xmlRoot.getElementsByTagName("msg")[0].text);
        }

        function viewMessage() {
            var d = document.getElementById("Message");
            var dataIsland = document.getElementById("ResultsIsland");
            var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.loadXML(dataIsland.innerHTML);
            d.innerHTML = xmlDoc.getElementsByTagName("msg")[0].text;
        }
    </script>
</head>
<body style="margin: 100px;">

<div style="margin: 10px;">
    <button onclick="viewMessage();">view message</button>
    message is: <span id="Message"/>
</div>

<table datasrc="#ResultsIsland" style="margin: 10px;">
    <tr>
        <td>
            message: <input type="text" datafld="msg" />
        </td>
    </tr>
</table>

<table datasrc="#ResultsIsland" style="margin: 10px;">
    <tr>
        <td>
            message: <input type="text" datafld="msg" />
        </td>
    </tr>
</table>

<div style="margin: 10px;">
    <button onclick="modifyDataIsland();">modify message</button>
</div>

</body>
</html>

質問：XMLデータアイランドをIE9で更新して、変更が埋め込みXMLフィールドとバインドされたデータフィールドの両方に反映されるようにすることは可能ですか？

score 1 · Accepted Answer

さまざまなテストを行った結果、IE9 を強制的に互換モードにすると、IE9 で XML データアイランドをうまく処理できることがわかりました。これにより、XML データアイランドに IE5/6 スクリプトを使用できるようになります。

IE9 で動作する改訂されたサンプルを次に示します。

<!--
    This comment and the following DocType forces IE9
    into quirks mode which is needed for the XML Data Islands
-->
<!DOCTYPE HTML>

<html>
<head>
    <title>Data Islands</title>

    <xml id="ResultsIsland">
        <result>
            <msg>Message</msg>
        </result>
    </xml>

    <script type="text/javascript">
        function modifyDataIsland() {
            var xml = document.all("ResultsIsland").XMLDocument;
            xml.getElementsByTagName("msg")[0].text = new Date();
            alert('msg element updated to: ' + xml.getElementsByTagName("msg")[0].text);
        }

        function viewMessage() {
            var xml = document.all("ResultsIsland").XMLDocument;
            document.getElementById("Message").innerHTML = xml.getElementsByTagName("msg")[0].text;
        }
    </script>
</head>
<body style="margin: 100px;">

<p style="margin: 30px 10px;">
   Document is in
    <strong>
    <script type="text/javascript">document.write(document.compatMode)</script>
    </strong> mode.
</p>

<div style="margin: 10px;">
    <button onclick="viewMessage();">view message</button>
    message is: <span id="Message"></span>
</div>

<table datasrc="#ResultsIsland" style="margin: 10px;">
    <tr>
        <td>
            message: <input type="text" datafld="msg"/>
        </td>
    </tr>
</table>

<table datasrc="#ResultsIsland" style="margin: 10px;">
    <tr>
        <td>
            message: <input type="text" datafld="msg"/>
        </td>
    </tr>
</table>

<div style="margin: 10px;">
    <button onclick="modifyDataIsland();">modify message</button>
</div>

</body>
</html>

javascript - IE9を使用したXMLデータアイランドの更新

1 に答える 1

Related

Reference