使用 jQuery 处理遗留“数据岛”

“数据岛”是一种过时的 Microsoft 技术，任何现代浏览器都不支持。它随 Internet Explorer 5 一起推出，并在 Internet Explorer 9 之后被放弃。任何其他浏览器都不支持它。

MSDN 关于数据岛过时的文章

XML 简单地放置在页面上，较旧的 Internet Explorer 浏览器将其解析为 XMLDocument 对象。然后使用 JavaScript 通过 xPath 查询该对象。

以下是一个示例 XML 数据岛

<xml id="XMLClientEvents">
  <clientevents>
    <openmodalevent id="openModal1" setpgmode="Mode1">
      <height>200</height>
      <width>400</width>
      <arguments>
        <argument required="true" name="GUID"></argument>
      </arguments>
    </openmodalevent>
    <openmodalevent id="openModal2" setpgmode="Mode2">
      <height>300</height>
      <width>500</width>
    </openmodalevent>
    <openmodalevent id="openModal3" setpgmode="Mode3">
      <height>600</height>
      <width>800</width>
      <arguments>
        <argument required="true" name="GUID">
        </argument>
      </arguments>
    </openmodalevent>
  </clientevents>
</xml>

在现代浏览器中，此元素被解析为 HTMLUnknownObject，无法直接通过 JavaScript 轻松查询。

使此结构与现代浏览器兼容的首选方法是从服务器端重写它，以提供 HTML 5 数据块。请参阅本文，了解如何将数据岛转换为数据块。

如果无法重写服务器端，可以使用 jQuery 访问 HTMLUnknownObject 内部的 XML 结构。

jQuery 用于从上述 XML 文档中提取数据。

// JavaScript source code
function ProcessXML() {
    //call function to get the node object for eventId
    var $targetNode = getTargetNode('openModal1');
    //use find() to navigate the node
    var height = $targetNode.find('height').text();
    var width = $targetNode.find('width').text();
    var newPageMode = $targetNode.attr('setpgmode');
    alert("modal 1: " + height + " x " + width + " " + newPageMode);
    $targetNode = getTargetNode('openModal2');
    //use find() to navigate the node
    height = $targetNode.find('height').text();
    width = $targetNode.find('width').text();
    newPageMode = $targetNode.attr('setpgmode');
    alert("modal 2: " + height + " x " + width + " " + newPageMode);
    $targetNode = getTargetNode('openModal3');
    //use find() to navigate the node
    height = $targetNode.find('height').text();
    width = $targetNode.find('width').text();
    newPageMode = $targetNode.attr('setpgmode');
    alert("modal 3: " + height + " x " + width + " " + newPageMode);
}

function getTargetNode(eventId) {
    //parse() the innerHTML
    var xmlDoc = $.parseXML(document.getElementById("XMLClientEvents").innerHTML);
    //Convert to jQuery object
    var $xmlObject = $(xmlDoc);
    //find the node based on argument
    return $xmlObject.find('clientevents').find('openmodalevent[id=' + eventId + ']');
}

使用 jQuery 在面对这种遗留的浏览器特定技术时，可以提供一定的浏览器独立性。

有关演示（未使用警报框），请参阅此 Fiddle – 在 Internet Explorer 11 和 Chrome 47.0.2526.106 上测试过。