Vorlage:TransparenteIFrames

Transparente iFrames

Wird das Attribut color-scheme im eingebetteten Dokument nicht korrekt gesetzt, kann der Browser einen systemseitigen Hintergrund (z. B. Weiß im Light Mode, Dunkelgrau im Dark Mode) anstelle eines transparenten Hintergrunds rendern. Um sicherzustellen, dass der iFrame-Hintergrund in allen Umgebungen wirklich transparent bleibt, muss der folgende Code-Abschnitt in der HTML-Datei hinzugefügt werden vor dem schließenden </body>-Tag eingebunden werden.

<script>
  window.addEventListener("message", (event) => {
      const referrer = new URL(document.referrer).hostname;
      const origin = new URL(event.origin).hostname;
      
      if (origin !== referrer || event.data.type !== "iqdIframeTransparency") return;
      
      if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark';
    });
</script>