IE11中含<xsl:import>的Javascript XSLT转换失效问题

你遇到的这个问题是IE11客户端XSLT处理的典型兼容性限制——Chrome、Firefox、Edge这些现代浏览器能自动识别并加载<xsl:import>引用的外部样式表，但IE11的XSLTProcessor完全不支持客户端环境下的XSL导入逻辑，导致主XSL里的转换规则缺失，最终只能输出原始XML的纯文本内容。

问题本质 #

当你在IE11里调用xslDoc.load('cdcatalog.xsl')时，它只会加载主XSL文件本身，完全忽略其中的<xsl:import>指令，相当于你的转换逻辑根本没生效。而直接使用合并后的cdcatalog_imported.xsl时，所有转换规则都在单个文件里，IE11就能正常处理。

几种可行的解决方案 #

1. 针对IE11切换合并版XSL（最快捷的临时方案） #

既然你已经有了合并好的cdcatalog_imported.xsl，可以通过JS检测IE11，自动切换使用这个版本：

// 检测IE11的经典判断逻辑
const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;

// 根据浏览器选择对应的XSL文件
let xslFile = 'cdcatalog.xsl';
if (isIE11) {
  xslFile = 'cdcatalog_imported.xsl';
}

xslDoc.load(xslFile);

这种方式不需要改动现有XSL的模块化结构，只需要加个浏览器判断就能快速解决问题。

2. 手动加载并注入导入的XSL内容（保留模块化的兼容方案） #

如果想继续保留XSL的模块化设计，可以用JS手动加载被导入的样式表，然后把内容注入到主XSL的DOM中，再执行转换：

// 封装一个加载带导入的XSL的函数
function loadXslWithImports(mainXslPath, importedXslPath, onLoaded) {
  // 先加载主XSL
  const mainXhr = new XMLHttpRequest();
  mainXhr.open('GET', mainXslPath, true);
  mainXhr.onload = function() {
    if (mainXhr.status === 200) {
      const mainXslDoc = mainXhr.responseXML;
      // 再加载被导入的XSL
      const importXhr = new XMLHttpRequest();
      importXhr.open('GET', importedXslPath, true);
      importXhr.onload = function() {
        if (importXhr.status === 200) {
          const importedXslDoc = importXhr.responseXML;
          // 找到主XSL里的<xsl:import>节点，替换成导入的XSL内容
          const importNode = mainXslDoc.querySelector('xsl\\:import, import');
          if (importNode) {
            const importedRoot = importedXslDoc.documentElement;
            importNode.parentNode.replaceChild(mainXslDoc.importNode(importedRoot, true), importNode);
          }
          // 把处理好的XSL文档传给回调函数
          onLoaded(mainXslDoc);
        }
      };
      importXhr.send();
    }
  };
  mainXhr.send();
}

// 使用示例：加载XSL并执行转换
loadXslWithImports('cdcatalog.xsl', 'cdcatalog_imported.xsl', function(processedXslDoc) {
  const xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(processedXslDoc);
  const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
  // 把转换结果渲染到页面
  document.getElementById('output').innerHTML = new XMLSerializer().serializeToString(resultDoc);
});

这种方法既保留了XSL的模块化，又能让IE11正常处理转换。

3. 服务器端预合并XSL（长期推荐方案） #

如果你的项目有后端服务，建议在服务器端提前把带有<xsl:import>的XSL文件合并成单个文件，然后返回给客户端。这样所有浏览器都能使用同一个XSL文件，不需要在客户端做任何兼容处理。

比如在Node.js中可以用xsltproc工具，Java/.NET环境也有对应的XSLT处理库来完成合并操作。

IE11调试小技巧 #

• 按F12打开IE11的开发者工具，切换到「网络」标签，你会发现加载主XSL后，IE11根本没有发起加载cdcatalog_imported.xsl的请求，这就能实锤是<xsl:import>未被处理的问题。
• 在JS里输出加载后的xslDoc的XML内容，你会看到<xsl:import>标签原封不动地留在那里，完全没有被替换成导入的转换规则。

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