Template:TransparenteIFrames

Transparent iFrames

If the color-scheme attribute is not set correctly in the embedded document, the browser may render a system-defined background (e.g. white in light mode, dark gray in dark mode) instead of a transparent background. To ensure that the iFrame background remains truly transparent in all environments, the following code snippet must be added to the HTML file before the closing </body>-tag.

<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>