1

我正在开发一个仅限 IE6 的内部遗留网站。由于使用了XML Data Island特定的脚本，IE8/9 失败。目标是将站点修改为可在 IE9 上查看。其他浏览器不是问题。

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

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

作品

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

不工作

  • 在值更改后检索 XML 数据岛的值（至少我尝试过的方式）。
  • 使绑定到 XML 数据岛的字段与嵌入的 XML 保持同步。

重现问题的步骤

  1. (ok) 单击查看消息按钮，嵌入的 xml 中的值正确显示。
  2. (ok) 更改其中一个输入字段中的值；另一个已正确更新。
  3. （不行）再次点击查看消息按钮；消息的新值不会更新。
  4. (1/2 ok) 点击修改消息按钮，XML 更新；但是绑定到 XML 数据岛的输入字段不会更新。
  5. (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 和绑定的数据字段中？

4

1 回答 1

1

经过各种测试，我发现强制 IE9 进入 quirks 模式可以让 IE9 与 XML Data Islands 很好地配合使用。这允许您对 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>
于 2012-07-19T15:58:24.023 回答