无法在 javascript 中初始化 XSLTProcessor 构造函数答案

【问题标题】：Not able to initialize XSLTProcessor constructor in javascript无法在 javascript 中初始化 XSLTProcessor 构造函数
【发布时间】：2021-02-07 13:39:27
【问题描述】：

我正在使用LWC 框架来开发组件。它基于 ES6 标准构建。我正在尝试使用 XSLTProcessor 来满足我的一项要求，但它给了我一个错误。

未能构造“XSLTProcessor”：请使用“新”运算符，此 DOM 对象构造函数不能作为函数调用。

代码：

import { LightningElement } from 'lwc';

export default class DisplayReport extends LightningElement {
    handleOnClick(){        
        if(window.XSLTProcessor){
            console.log('XSLTProcessor TRUE')// Working
            try
            {
            var xsltProcessor = new window.XSLTProcessor();
            console.log('XSLTProcessor WORKING') // Not coming here
            }
            catch(e){
                console.log(e.message); //Error displayed
            }
        }
        if(window.DOMParser){
            console.log('DOMParser TRUE')
            try
            {
            var parser = new window.DOMParser();
            console.log('DOMParser WORKING') //This is working
            }
            catch(e){
                console.log(e.message); //No Errors
            }
        }
    }
}

我不知道为什么XSLTProcessor 不工作但DOMParser 工作。

【问题讨论】：

这是在特定浏览器中发生的吗？使用特定版本的lwc？我不熟悉它，但是当我在 developer.salesforce.com/docs/component-library/tools/… 尝试使用 XSLTProcessor 的一些代码时，它似乎在 Google Chrome 中运行良好，至少当我使用 <div class="xslt-target" lwc:dom="manual"></div> 作为我想要插入 XSLT 结果片段的 div 时。跨度>
所有浏览器都会出现这种情况。仅当您将此自定义组件添加到 salesforce 页面布局时，您才会看到此错误。

标签： javascript xslt lwc

【解决方案1】：

对https://developer.salesforce.com/docs/component-library/tools/playground 的我来说，拥有例如my-button.html作为

<template>
    <div>
        <input type="button" value="test" onclick={handleClick}>
        <div class="xslt-output" lwc:dom="manual"></div>
    </div>
</template>

和my-button.js 一样

import { LightningElement } from 'lwc';

export default class MyButton extends LightningElement {

  handleClick() {
      const xsltProc = new XSLTProcessor();
      const xsltCode = `<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html" indent="yes"/>
  <xsl:template match="list">
    <section>
      <h2>XSLTProcessor test</h2>
      <ul style="list-style-type: disc;">
        <xsl:apply-templates/>
      </ul>
    </section>
  </xsl:template>
  <xsl:template match="item">
    <li>
      <xsl:apply-templates/>
    </li>
  </xsl:template>
</xsl:stylesheet>`;
      const xmlCode = `<list>
    <item>foo</item>
    <item>bar</item>
  </list>`;
      const domParser = new DOMParser();
      const xsltDoc = domParser.parseFromString(xsltCode, 'application/xml');
      const xmlDoc = domParser.parseFromString(xmlCode, 'application/xml');
      xsltProc.importStylesheet(xsltDoc);

      const container = this.template.querySelector('div.xslt-output');

      container.appendChild(xsltProc.transformToFragment(xmlDoc, container.ownerDocument));
  }
}

然后在app.html 内部我可以使用<c-my-button></c-my-button> 并单击按钮执行XSLT 并插入其结果。

【讨论】：