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 abhängig von der Werbeform in das jeweilige Dokument eingebunden werden.
| Werbeform | Position | Code |
|---|---|---|
| Page Skin | <script>
window.addEventListener("message", (event) => {
if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return;
if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark';
});
</script> | |
| Value Ad | Top | <script>
window.addEventListener("message", (event) => {
if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return;
if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark';
});
</script> |
| Value Ad | Left/Right | <script>
window.addEventListener("message", (event) => {
if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return;
if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark';
});
</script> |