IE11兼容模式下XSLT转换<image>变<img>的解决求助

问题原因 #

IE11兼容模式下，将XML内容输出到HTML的<div>中时，浏览器的HTML解析器会把XML里的<image>识别为HTML的<img>标签（<image>是HTML早期对<img>的别名写法），导致节点被篡改，破坏后续JS解析流程。

解决方案 #

方法1：用<textarea>替代<div>存储XML

textarea的内容会被当作纯文本处理，不会被HTML解析器转换标签。修改XSLT代码：

<textarea class="hidden" style="display:none;">
    <xsl:copy-of select="/*" />
</textarea>

JS解析时，直接读取textarea的value获取原始XML内容：

const xmlText = document.querySelector('.hidden').value;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlText, 'text/xml');
// 后续正常解析xmlDoc即可

方法2：将XML转为文本节点插入div

通过XSLT把XML内容转成文本节点，避免HTML解析器识别标签：

<div class="hidden">
    <xsl:text disable-output-escaping="yes">&lt;![CDATA[</xsl:text>
    <xsl:copy-of select="/*" />
    <xsl:text disable-output-escaping="yes">]]&gt;</xsl:text>
</div>

JS解析时，读取div的文本内容，去掉CDATA包裹后再解析：

const rawContent = document.querySelector('.hidden').textContent;
const xmlText = rawContent.replace(/^\s*<!\[CDATA\[|\]\]>\s*$/g, '');
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlText, 'text/xml');

方法3：直接在XSLT中导出XML字符串到JS变量

跳过DOM存储，直接把XML内容作为字符串注入到JS变量中，避免HTML解析干扰：

<script type="text/javascript">
    window.rawXml = '<xsl:value-of select="/*" disable-output-escaping="yes" />';
</script>

JS中直接使用这个变量解析：

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(window.rawXml, 'text/xml');

注意事项 #

• 所有方法都要确保XML内容的转义处理正确，避免出现语法错误。
• 因为无法修改后端XML，所有调整都在XSLT和前端JS层面完成，无需改动原始XML结构。

内容的提问来源于stack exchange，提问作者Glenn Carver