XSLT中调用json-doc生成HTML时浏览器返回空白页问题求助

核心原因 #

1. 浏览器原生XSLT版本限制：Firefox、Chrome、Safari仅支持XSLT 1.0，而json-doc是XSLT 3.0新增的函数，直接在浏览器中使用会导致语法不识别，最终输出空白。
2. 跨域请求限制：即使支持XSLT 3.0，浏览器的同源策略会阻止跨域获取JSON资源，除非目标服务器配置了允许的CORS规则。

解决方案 #

方案1：XSLT 1.0 + JavaScript 结合处理 #

利用XSLT输出基础结构，再通过JavaScript完成跨域请求和内容填充，这是浏览器环境下最可行的方式：

1. 修改XSLT代码，输出带活动ID和链接的空单元格：

<td class="activity-cell" 
    data-activity-id="{substring-after(//cs:campaign, 'https://deims.org/activity/')}"
    data-campaign-url="{//cs:campaign}">
</td>

2. 添加JavaScript代码，页面加载后发起请求并填充内容：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.activity-cell').forEach(cell => {
    const activityId = cell.dataset.activityId;
    const campaignUrl = cell.dataset.campaignUrl;
    
    fetch(`https://deims.org/api/activities/${activityId}`)
      .then(res => res.ok ? res.json() : Promise.reject('请求失败'))
      .then(data => {
        const link = document.createElement('a');
        link.href = campaignUrl;
        link.target = '_blank';
        link.textContent = data.title;
        cell.appendChild(link);
      })
      .catch(err => {
        cell.textContent = '活动标题加载失败';
        console.error(err);
      });
  });
});

方案2：服务器端XSLT 3.0处理 #

如果不想依赖前端JS，可以在服务器端使用支持XSLT 3.0的处理器（如Saxon）完成转换：

• 服务器端读取XML源文件，用XSLT 3.0处理器执行转换（此时json-doc可以正常工作，且服务器端不受浏览器同源策略限制）
• 将转换后的HTML直接返回给浏览器

注意事项 #

• 确认目标API的CORS配置：如果https://deims.org/api/activities/未配置Access-Control-Allow-Origin头，前端JS请求会失败，此时需要在自己的服务器端添加代理转发请求。
• 原代码中$activityLink?title是XSLT 3.0的JSON节点访问语法，XSLT 1.0不支持，必须替换为JS的JSON属性访问方式。

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