Question

我的代码从Ajax调用中获取JSON，该调用包含XML，并通过它读取一些信息。

虽然XML的解析在Chrome中运行良好，但在IE中却没有，因为在IE outerHTML中返回undefined。

我已经完成了几个帖子并尝试了几种可能的解决方案但没有成功。

JavaScript代码是：

$.ajax({
    url: 'getJSONwithXML.do',
    type:'POST',
    data:'',
    dataType: 'json',
    cache: false
}).done(function(data) {
    var jsonResp = JSON.parse(data.data.respuesta);
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(jsonResp,"text/xml");
    var texto = $(xmlDoc).find('texto').prop('outerHTML');
    console.log(texto); // <--- undefined in IE
    $('body').append('<div>' + texto + '</div>');
});

我在jsonResp下获得的xml是：

<?xml version="1.0" encoding="UTF-16"?>
<envio>
    <version>1.0.0</version>
    <anuncios>
        <remitente>
            <nodoRemitente>Nodo Remitente</nodoRemitente>
        </remitente>
        <anuncio>
            <emisor>
                <nodoEmisor>Nodo Emisor</nodoEmisor>
            </emisor>
            <metadatos>
                <id>16249</id>
            </metadatos>
            <contenido>
                <texto>
                    <p>
                        Notificación de prueba
                    </p>
                    <p>
                        Notificación de prueba
                    </p>
                    <p>
                        Notificación de prueba
                    </p>
                </texto>
            </contenido>
        </anuncio>
    </anuncios>
</envio>

在Chrome或Fireforx下，texto返回

<texto>
    <p>
        Notificación de prueba
    </p>
    <p>
        Notificación de prueba
    </p>
    <p>
        Notificación de prueba
    </p>
</texto>

这就是我想要的（texto标记内的HTML代码），但在Internet Explorer中，我得到undefined。

我见过textContent属性，但这不是我想要的，因为它不是HTML代码。

有什么想法吗？

Answer 1

Internet Explorer不为XML文档中的节点提供outerHTML属性（也不是innerHTML）。您可以使用XMLSerializer（在IE 9+中）解决这个问题：

var node = $(xml).find('texto')[0]; // get DOM node
// Try outerHTML. If not available, use XMLSerializer
var texto = node.outerHTML || new XMLSerializer().serializeToString(node);

您会注意到texto字符串可能会获得根节点的xmlns属性。但我不认为这对你使用它的方式很重要。

Answer 2

因为您使用的是JQuery（而不是返回单个DOM元素的标准DOM API方法），所以您的所有JQuery查询都将至少返回一个JQuery包装集。这个包装集可能会填充或不填充，所以你不应该测试包装集的存在，你应该测试它的内容。这是通过检查集合的length来完成的。

此外，您的测试确保您想要获得outerHTML的元素有点复杂。在测试"undefined"时，您将获得typeof（作为字符串），因此请确保在将undefined作为字符串进行测试时使用该字符串。

见这个例子：

＆＃13;

// There is no element with an id of "special" in this DOM
var result = $("#special");

// But, the JQuery query will still return a "wrapped set" container object
console.log(result === null);                         // false - there is a wrapped set

// You need to test for what's in the container:
console.log(result.length > 0);                       // false - the set is empty
console.log(typeof result[0] === "undefined");        // true  - nothing exists at position 0

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

因此，您的代码应该检查length。请记住，在length条件中使用的0 if是＆＃34; falsey＆＃34;并将转换为false，而任何其他值都是＆＃34; truthy＆＃34;并将转换为true：

if($(this).find('texto').length){
  debugger;
  var texto = $(this).find('texto').prop('outerHTML');
  .  . .
}

但是，由于您可能需要多次访问该包装集，因此可以使用：

var el = $(this).find('texto');

if(el.length){
  debugger;
  var texto = el.prop('outerHTML');
  .  . .
}

Answer 3

我认为问题在于你在jQuery的HTML方法中使用了混合的基础DOMParser。 $(this).find(...)在各种版本的IE中做了很多工作来解决它的flakey文档模型，但是其中很多都不适合使用XML。

IE支持XML，但它在自定义元素方面存在问题，因此<texto>在XML中很好，但在HTML5中无法识别。

要确定我们需要了解jQuery的确切版本以及IE当前使用的文档模型（基于文档声明）。

然而，解决这个问题的一个简单方法是切换用于XML解析步骤的jQuery，或者从原生DOMParser切换到$.parseXML。

我先尝试前者 - 用$(this).find(...)替换所有this.getElementsByTagName(...)。

outerHTML在IE中未定义

3 个答案: