Question

我正在尝试找到一种跨浏览器的方法来序列化包含CDATA的SVG文档。

我的代码在Chrome和Firefox上运行良好，但是在Internet Explorer上，CDATA被序列化为文本而不是CDATA部分。到目前为止，这是我的实现：

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var xml = new DOMParser().parseFromString('<xml></xml>',  "application/xml");
var cdata = xml.createCDATASection('Some data & some more');
svg.appendChild(cdata);
log("Node Type: " + cdata.nodeName)
log("SVG: " + new XMLSerializer().serializeToString(svg));


// Utility function for output
function log(s) {
  var output = document.getElementById('output');
  if (output) {
    output.innerHTML += new Option(s).innerHTML + '<br>';
  } else {
    console.log(s);
  }
}

<div id="output"></div>

在Chrome和Firefox上，XMLSerializer的输出符合预期：
<svg xmlns="http://www.w3.org/2000/svg"><![CDATA[Some data & some more]]></svg>

但是在Internet Explorer上，CDATA是作为一个简单的文本节点编写的：
<svg xmlns="http://www.w3.org/2000/svg">Some data & some more</svg>

我尝试将CDATA节的数据添加到“ <！[CDATA [”和“]]>”“中，但这不起作用，因为它将被转义。我可以做些什么使Internet Explorer正确编写CDATA部分？

注意：如果将代码段嵌入到Stackoverflow中，则该代码段不能在Internet Explorer中工作，但它可以作为独立文件使用。

Answer 1

我想出了一个骇人听闻的解决方案，虽然该解决方案并不令人满意，但确实可行。

在序列化之前，__CDATA的数据被开始和结束标记包围（我正在使用CDATA__和var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); var xml = new DOMParser().parseFromString('<xml></xml>', "application/xml"); var cdata = xml.createCDATASection('Some data & some more'); // Add markers cdata.data = "__CDATA" + cdata.data + "CDATA__"; svg.appendChild(cdata); var svgStr = new XMLSerializer().serializeToString(svg); // Replace markers (and already existing CDATA start and end tags) svgStr = svgStr.replace(/(?:<\!\[CDATA\[)?__CDATA(.*?)CDATA__(?:\]\]>)?/g, '<![CDATA[$1]]>'); log("SVG: " + svgStr); // Utility function for output function log(s) { var output = document.getElementById('output'); if (output) { output.innerHTML += new Option(s).innerHTML + '<br>'; } else { console.log(s); } }，在序列化之后，使用正则表达式来替换标记（以及可选的CDATA开头和结尾标签）。通过CDATA开头和结尾标签。

可以选择使用浏览器嗅探功能来检测是否完全有必要进行此黑客攻击。

这是修改后的示例：

<div id="output"></div>

print(",".join([str(i) for i in range(1,10)]))

Javascript使用XMLSerializer序列化CDATA

1 个答案: