IE 中未定义的 outerHTML

Question

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

虽然 XML 的解析在 Chrome 中运行良好，但在 IE 中却不行，因为在 IE outerHTML returns 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 returns

<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

因为您正在使用 JQuery（与标准 DOM API 方法相反，return 单个 DOM 元素），您所有的 JQuery 查询将 return，至少是一个 JQuery 包装集。该包装集可能已填充或未填充，因此您不应该测试包装集的存在，您应该测试它的内容。这是通过检查集合的 length 来完成的。

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

看这个例子：

// 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

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

所以您的代码应该检查 length。请记住，在 if 条件中使用 0 的 length 是 "falsey" 并将转换为 false，而任何其他值都是 "truthy" 并将转换为 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 2

我认为问题在于您将 jQuery 的 HTML 方法与 XML 中的基础 DOMParser 混合使用。 $(this).find(...) 在各种版本的 IE 中做了很多工作来解决其古怪的文档模型，但其中很多都不能很好地与 XML 一起使用。

IE 支持 XML，但它对自定义元素有问题，因此 <texto> 在 XML 中没问题，但在 HTML5.

中无法识别

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

但是，解决此问题的一个简单方法是为 XML 解析步骤切换出 jQuery，或者从本机 DOMParser 切换到 $.parseXML .

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

Answer 3

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 属性。但我认为这对您使用它的方式无关紧要。

IE 中未定义的 outerHTML

outerHTML undefined in IE

javascript

jquery

internet-explorer

undefined

outerhtml