javascript - Internet Explorer XML 解析错误，无法重现示例

Question

我正在调试一个不是我写的更大系统的以下代码。有来自服务器的 XML 通过 AJAX 未正确解析。下面解释一下这个问题。

请注意连字符 - 如果 CDATA 部分中有连字符，Internet Explorer 会插入它们。

例如当我打印时

console.log(a.item(4).childNodes.item(0));

我明白了

`{"INCD":"30362790021","sycd":"BKJ2` 

为了调试问题，我尝试创建一个最小示例。

我已将变量 source(通过设置条件为 .ocmmand == 'List_detail' 的断点)复制到一个简单的 HTML Javascript 文件，如下所示:

<script>

    var source = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<!DOCTYPE primrose SYSTEM \"dtd/primrose.dtd\">\n<primrose><array type=\"string\"> .... </primrose>";

    var xml = new DOMParser().parseFromString(source, 'text/xml');
    var a = xml.documentElement.childNodes;
    console.log(a);
    console.log(a.item(4).childNodes.item(0));
</script>

全长示例位于 http://pastebin.com/GaHdjiWW

但这似乎工作得很好:

当我运行 console.log(a.item(4).childNodes.item(0)); 我得到

{"INCD":"30362790021","sycd":"BKJ2-2","type_code":"00000050555","type_name":"BKJ","series_code":"110302280810","web_product_id":"10302280810","series_name":"十字槽盘头螺钉","disp_brandName":"MISUMI","brd_code":"MSM1","ecal_brd_code":"MSM","main_photo":"MSM1/PHOTO/10302280810.jpg","catch_copy":null,"cad_2d":"1","cad_2d_type":"1","cad_3d":"1","cad_3d_type":"2","scene7_img_product":[ {"img_fileName":"110302280810_20149999_m_01_99999_jp","img_description":""}],"ary_displayLink":null,"ary_param_verify":"BKJ{2}\t{2}","ary_param_disp":"BKJ{2}\t{2}","param_conv_bef":null,"param_conv_bef_disp":null,"canOrder":"1"}

等等……

Internet Explorer 版本为 11.0.9600.18314

我知道IE10, 11 CDATA with hyphens parsed wrong它似乎是 IE 中的一个错误。但为什么我不能在同一个浏览器中重现它？

Answer 1

我将其追溯到将 MutationObserver.observe 与 childList 和子树选项一起使用:https://github.com/talee/mutationobserver-breaks-characterdata . 解决方法:在 IE 中使用已弃用的 MutationEvents。 https://www.npmjs.com/package/mutationobserver-polyfill为 IE 11 做这项工作。

破解代码:

var observer = new MutationObserver(function() {});
// Other mutation types/combos work fine
observer.observe(document, {
  childList: true,
  subtree: true
});

测试:

var parser = new DOMParser();
var expectedContent = 'hello-world';
// <div>hello-world</div> breaks too. Using CDATA as that's my current use
// case.
var xml = parser.parseFromString('<div><![CDATA[' + expectedContent + ']]></div>','text/xml');
var result = xml.firstChild.firstChild.data;

// Output test results for viewing
if (result != expectedContent) {
  statusOut.textContent = 'FAIL';
} else {
  statusOut.textContent = 'SUCCESS';
}
resultOut.textContent = 'Result: "' + result + '"';

我在 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8589859/ 上为 IE 11 创建了一个错误.

然而基于https://connect.microsoft.com/IE/feedback/details/1398926/ie11-does-not-parse-cdata-containing-hyphens-correctly ，该问题不太可能得到解决，因为它与安全无关:

Posted by Brad [MSFT] on 2/17/2016 at 12:02 PM

I see. Thank you for the repro. I am able to repro using IE 11.29.10586.0 Unfortunately we are no longer working IE bugs unless they are security related. Sorry to be the bearer of bad news. I will leave the feedback in its current state since it does not apply to Edge.