Добавление внешнего виджета в композер

Разработка
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'>Загрузка виджета PurpleAir...</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 вызывается каждый раз при загрузке соответствующего поста, но что-то мешает скрипту работать повторно.

Не уверен, связано ли это, но в консоли я также вижу ошибку Uncaught TypeError: i is null из файла pa.widget.js:

Screen Shot 2021-11-08 at 9.11.39 PM