在XSL模板中插入带冒号的JS代码触发QName报错的解决方案问询

问题根因 #

XSLT处理器默认会把所有大括号{}识别为**属性值模板（AVT）**的语法标识，尝试解析大括号内的内容为XPath表达式。你在script标签内写的JS对象字面量的大括号被XSLT误判为需要解析的AVT，container:这类JS对象键名加冒号的格式不符合XPath QName命名规范，因此触发致命错误。

可行解决方案 #

方案1：大括号转义（最简便，适合无XSL变量嵌入的场景） #

在XSLT中如果需要输出普通的单个大括号，直接写两个连续的大括号即可完成转义，XSLT处理器会自动将{{转换为{，}}转换为}。
你测试用的最简模板修改后如下：

<xsl:template name="myPanoramaTemplate">
<script>
  var viewer = new PhotoSphereViewer.Viewer({{
    container: document.querySelector('#viewer'),
    panorama: 'path/to/panorama.jpg'
  }});
</script>
</xsl:template>

方案2：CDATA包裹+变量拆分（适合需要嵌入XSL变量的场景） #

如果需要在脚本中插入你定义的$image变量，可以将脚本内容拆分为CDATA段和变量输出两部分，CDATA段内的所有内容都会被XSLT处理器当成纯文本处理，不会解析语法。
另外你原代码中的变量选择器div/[@data-name='PanoImage']多了不必要的斜杠，修正后可用：

<xsl:template name="myPanoramaTemplate">
<xsl:variable name="image" select="div[@data-name='PanoImage']/img/@src"/>

<div id="viewer" style="width: 100vw; height: 100vh;"></div>
<script>
<![CDATA[
  var viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: ']]><xsl:value-of select="$image"/><![CDATA['
  });
]]>
</script>
</xsl:template>

方案3：xsl:text包裹强制输出 #

如果你的XSLT处理器对CDATA支持有问题，也可以用xsl:text标签配合disable-output-escaping="yes"强制输出纯文本：

<xsl:template name="myPanoramaTemplate">
<xsl:variable name="image" select="div[@data-name='PanoImage']/img/@src"/>

<div id="viewer" style="width: 100vw; height: 100vh;"></div>
<script>
<xsl:text disable-output-escaping="yes">
  var viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: '</xsl:text><xsl:value-of select="$image"/><xsl:text disable-output-escaping="yes">'
  });
</xsl:text>
</script>
</xsl:template>

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