Vorlage:TransparenteIFrames: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 11: | Zeile 11: | ||
| Page Skin || || <syntaxhighlight lang="html"><script> | | Page Skin || || <syntaxhighlight lang="html"><script> | ||
window.addEventListener("message", (event) => { | window.addEventListener("message", (event) => { | ||
if (event. | if (!Array.isArray(event.data.allowedOrigins) || !event.data.allowedOrigins.includes(event.origin) || event.data.type !== "iqdIframeTransparency") return; | ||
if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark'; | if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark'; | ||
}); | }); | ||
| Zeile 26: | Zeile 26: | ||
| Value Ad || Top || <syntaxhighlight lang="html"><script> | | Value Ad || Top || <syntaxhighlight lang="html"><script> | ||
window.addEventListener("message", (event) => { | window.addEventListener("message", (event) => { | ||
if (event. | if (!Array.isArray(event.data.allowedOrigins) || !event.data.allowedOrigins.includes(event.origin) || event.data.type !== "iqdIframeTransparency") return; | ||
if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark'; | if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark'; | ||
}); | }); | ||
| Zeile 34: | Zeile 34: | ||
| Value Ad || Left/Right || <syntaxhighlight lang="html"><script> | | Value Ad || Left/Right || <syntaxhighlight lang="html"><script> | ||
window.addEventListener("message", (event) => { | window.addEventListener("message", (event) => { | ||
if (event. | if (!Array.isArray(event.data.allowedOrigins) || !event.data.allowedOrigins.includes(event.origin) || event.data.type !== "iqdIframeTransparency") return; | ||
if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark'; | if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark'; | ||
| Zeile 53: | Zeile 53: | ||
| Page Skin || || <syntaxhighlight lang="html"><script> | | Page Skin || || <syntaxhighlight lang="html"><script> | ||
window.addEventListener("message", (event) => { | window.addEventListener("message", (event) => { | ||
if (event. | if (!Array.isArray(event.data.allowedOrigins) || !event.data.allowedOrigins.includes(event.origin) || event.data.type !== "iqdIframeTransparency") return; | ||
if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark'; | if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark'; | ||
}); | }); | ||
| Zeile 61: | Zeile 61: | ||
| Value Ad || Top || <syntaxhighlight lang="html"><script> | | Value Ad || Top || <syntaxhighlight lang="html"><script> | ||
window.addEventListener("message", (event) => { | window.addEventListener("message", (event) => { | ||
if (event. | if (!Array.isArray(event.data.allowedOrigins) || !event.data.allowedOrigins.includes(event.origin) || event.data.type !== "iqdIframeTransparency") return; | ||
if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark'; | if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark'; | ||
}); | }); | ||
| Zeile 70: | Zeile 70: | ||
| Value Ad || Left/Right || <syntaxhighlight lang="html"><script> | | Value Ad || Left/Right || <syntaxhighlight lang="html"><script> | ||
window.addEventListener("message", (event) => { | window.addEventListener("message", (event) => { | ||
if (event. | if (!Array.isArray(event.data.allowedOrigins) || !event.data.allowedOrigins.includes(event.origin) || event.data.type !== "iqdIframeTransparency") return; | ||
if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark'; | if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark'; | ||
Version vom 27. Mai 2026, 15:31 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.
| Werbeform | Position | Code |
|---|---|---|
| Page Skin | <script>
window.addEventListener("message", (event) => {
if (!Array.isArray(event.data.allowedOrigins) || !event.data.allowedOrigins.includes(event.origin) || 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 (!Array.isArray(event.data.allowedOrigins) || !event.data.allowedOrigins.includes(event.origin) || 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 (!Array.isArray(event.data.allowedOrigins) || !event.data.allowedOrigins.includes(event.origin) || event.data.type !== "iqdIframeTransparency") return;
if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark';
});
</script>
|