使用IE9更新XML数据孤岛

Updating XML Data Islands with IE9

本文关键字：数据孤岛 XML 更新 IE9 使用更新时间：2023-11-26

我正在开发一个仅限IE6的内部遗留网站。IE8/9由于使用了特定于XML数据岛的脚本而失败。目标是修改网站以便在IE9上查看。其他浏览器不值得关注。

这里有数千个页面和超过100个JS文件，所以这里的另一个目标不是重写所有内容，而是修复我们可以为IE9启用的网站。

我不完全确定我这样做是否正确，但下面是一个典型页面布局的例子。我把它浓缩成一个小测试，来展示什么有效，什么无效。

工作

XML数据孤岛的初始绑定
当一个XML元素被更新时，页面上的其他地方也会更新相同的XML元素（修改两个输入字段之一的值，当它失去焦点时，另一个输入字段将跟随套件）

不工作

在值发生更改后检索XML数据岛的值（至少我是这样尝试的）
保持绑定到XML数据岛的字段与嵌入的XML同步

再现问题的步骤

（ok）单击查看消息按钮，嵌入xml中的值将正确显示
（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>

问题：是否可以使用IE9更新XML数据岛，以便在嵌入的XML和绑定的数据字段中都反映更改？

经过各种测试，我发现强制IE9进入怪癖模式可以让IE9很好地处理XML数据孤岛。这使您可以使用IE5/6脚本编写XML数据孤岛。

以下是在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>