컴포저에 외부 위젯 추가하기

개발
7

이 문제를 시도해 봤는데 비슷한 결과를 얻었습니다. decorateCooked는 결국 비추천(deprecate)될 예정이라 decorateCookedElement를 사용하려고 했습니다.

 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 }
  );

여기서 약간의 차이는 키를 data 속성으로 전달했다는 점입니다:

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

스크립트가 처음 로드된 경우라면 제 환경에서는 잘 작동합니다. 하지만 스크립트가 포함된 게시물을 보고 나서 주제 목록으로 돌아가 다시 해당 주제에 진입하면 작동하지 않습니다(새로고침을 해야만 작동합니다). 관련 게시물이 로드될 때마다 decorateCookedElement가 발동되는 것을 확인할 수 있지만, 스크립트가 다시 작동하지 못하게 막는 무언가가 있는 것 같습니다.

관련이 있을지 확실하지는 않지만, pa.widget.js에서 콘솔에 Uncaught TypeError: i is null 오류도 보입니다:

Screen Shot 2021-11-08 at 9.11.39 PM