Vorlage:TransparenteIFrames: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Keine Bearbeitungszusammenfassung |
|||
| Zeile 90: | Zeile 90: | ||
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 vor dem schließenden <syntaxhighlight lang="html" inline></body></syntaxhighlight>-Tag eingebunden werden. | 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 vor dem schließenden <syntaxhighlight lang="html" inline></body></syntaxhighlight>-Tag eingebunden werden. | ||
<syntaxhighlight lang="html"><script> | |||
window.addEventListener("message", (event) => { | window.addEventListener("message", (event) => { | ||
const referrer = new URL(document.referrer).hostname; | const referrer = new URL(document.referrer).hostname; | ||
| Zeile 103: | Zeile 97: | ||
if (origin !== referrer || event.data.type !== "iqdIframeTransparency") return; | if (origin !== referrer || event.data.type !== "iqdIframeTransparency") return; | ||
if (event.data.htmlNeedsColorScheme | if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark'; | ||
}); | }); | ||
</script></syntaxhighlight> | </script></syntaxhighlight> | ||
Version vom 20. Juli 2026, 14:55 Uhr
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 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>