将外部小部件添加到作曲家

开发
7

我尝试了一下，结果与您类似。我尝试使用 decorateCookedElement，因为我们最终将弃用 decorateCooked。

 api.decorateCookedElement(
    (element) => {
      element.childNodes.forEach((node) => {
        if (node.dataset && node.dataset.pawidget) {
          node.insertAdjacentHTML(
            "beforeend",
            "<div id='PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard'>Loading PurpleAir Widget...</div>"
          );

          loadScript(
            `https://www.purpleair.com/pa.widget.js?key=${node.dataset.pawidget}&module=AQI&conversion=C0&average=0&layer=standard&container=PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard`
          );
        }
      });
    },
    { id: "widget-append", onlyStream: true, afterAdopt: true }
  );

这里的一个细微差别是我将密钥与数据属性一起传递：

<div data-PAWidget="21R72LUN79CXRZ50"></div>

这对我来说效果很好，如果这是脚本第一次加载。如果我查看一个带有脚本的帖子，然后返回到主题列表并重新进入该主题，它就无效了（直到我刷新）。我可以看到 decorateCookedElement 在每次加载相关帖子时都会触发，但有些东西阻止了脚本再次运行。

我不确定这是否相关，但我也在控制台中看到了来自 pa.widget.js 的 Uncaught TypeError: i is null 错误：

Screen Shot 2021-11-08 at 9.11.39 PM