在 NextJS 中嵌入 Tiktok 的自定義樣式

Question

我正在構建一個可以使用 Tiktok oEmbed 的網站，到目前為止一切順利，但我有一個問題，我如何自定義樣式，就像主體背景是透明的一樣？

我已經添加了 styles，MutationObserver 來檢測變化，但它不起作用，因為我的所有 styles 都被 Tiktok 的 embed.js 覆蓋了。 在這種情況下有人可以幫助我嗎？ 謝謝你。

.feature-frame {
  padding: 8px;

  iframe {
    min-width: initial !important;
    body {
      background-color: transparent !important;
      & * {
        color: $white !important;
      }
    }
  }

  blockquote {
    margin: 0;
    min-width: initial !important;
    body {
      background-color: transparent !important;
      & * {
        color: $white !important;
      }
    }
  }
}

const ObserverConfig = {
  childList: true,
  attributes: true,
  subtree: true,
};
const ref = useRef(null);

function mutationCallback(mutationList: MutationRecord[]) {
  // Get the iframe from the mutation that has added it
  const iframeAdded = mutationList.reduce<Node | undefined>((acc, curr) => {
    const iframe = Array.from(curr.addedNodes).find(
      (node) => node.nodeName === "IFRAME"
    ) as HTMLIFrameElement;

    if (iframe) {
      acc = iframe;
    }
    return acc;
  }, undefined);

  if (iframeAdded) {
    iframeAdded.addEventListener("load", () => {
      // Do something
    });
  }
  mutationList.forEach(function (mutation) {
    // Do something
  });
}

useEffect(() => {
  /**
   * MutationObserver:
   * https://stackoverflow.com/questions/3219758/detect-changes-in-the-dom
   */
  if (!("MutationObserver" in window)){
    // Window load
  }

  /**
   * TODO: Check bugs for MutationObserver
   * https://caniuse.com/#feat=mutationobserver
   */
  const elem = ref.current;

  const observer = new MutationObserver(mutationCallback);

  if (elem) {
    observer.observe(elem!, ObserverConfig);
  }
  return () => {
    observer.disconnect();
  };
}, [ref]);

Answer 1

iframe嵌入是跨域的，你不能影響它的背景顏色，因為它是由 Tiktok 在他們的身體上設置的 - 除非 Tiktok 提供一個你可以配置的樣式元素參數，否則不可能修改第三方 iframe 中的內容。