Vorlage:TransparenteIFrames: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Die Seite wurde neu angelegt: „<includeonly>===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 e…“ |
Keine Bearbeitungszusammenfassung |
||
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
<includeonly>===Transparente iFrames=== | <includeonly>===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. | 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. | ||
| Zeile 9: | Zeile 9: | ||
! Werbeform !! Position !! Code | ! Werbeform !! Position !! Code | ||
|- | |- | ||
| Page Skin || || <script> | | Page Skin || || <syntaxhighlight lang="html"><script> | ||
window.addEventListener("message", (event) => { | window.addEventListener("message", (event) => { | ||
if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return; | if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return; | ||
| Zeile 15: | Zeile 15: | ||
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'; | ||
}); | }); | ||
</script> | </script></syntaxhighlight> | ||
|} | |} | ||
}}}| | }}}| | ||
| Zeile 24: | Zeile 24: | ||
! Werbeform !! Position !! Code | ! Werbeform !! Position !! Code | ||
|- | |- | ||
| Value Ad || Top || <script> | | Value Ad || Top || <syntaxhighlight lang="html"><script> | ||
window.addEventListener("message", (event) => { | window.addEventListener("message", (event) => { | ||
if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return; | if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return; | ||
| Zeile 30: | Zeile 30: | ||
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'; | ||
}); | }); | ||
</script> | </script></syntaxhighlight> | ||
|- | |- | ||
| Value Ad || Left/Right || <script> | | Value Ad || Left/Right || <syntaxhighlight lang="html"><script> | ||
window.addEventListener("message", (event) => { | window.addEventListener("message", (event) => { | ||
if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return; | if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return; | ||
| Zeile 38: | Zeile 38: | ||
if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark'; | if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark'; | ||
}); | }); | ||
</script> | </script></syntaxhighlight> | ||
|} | |} | ||
}}}| | }}}| | ||
}}</includeonly><noinclude> | }}</includeonly><noinclude> | ||
===Transparente iFrames=== | ===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. | 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. | ||
| Zeile 51: | Zeile 51: | ||
! Werbeform !! Position !! Code | ! Werbeform !! Position !! Code | ||
|- | |- | ||
| Page Skin || || <script> | | Page Skin || || <syntaxhighlight lang="html"><script> | ||
window.addEventListener("message", (event) => { | window.addEventListener("message", (event) => { | ||
if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return; | if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return; | ||
| Zeile 57: | Zeile 57: | ||
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'; | ||
}); | }); | ||
</script> | </script></syntaxhighlight> | ||
|- | |- | ||
| Value Ad || Top || <script> | | Value Ad || Top || <syntaxhighlight lang="html"><script> | ||
window.addEventListener("message", (event) => { | window.addEventListener("message", (event) => { | ||
if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return; | if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return; | ||
| Zeile 66: | Zeile 66: | ||
}); | }); | ||
</script> | </script> | ||
</syntaxhighlight> | |||
|- | |- | ||
| Value Ad || Left/Right || <script> | | Value Ad || Left/Right || <syntaxhighlight lang="html"><script> | ||
window.addEventListener("message", (event) => { | window.addEventListener("message", (event) => { | ||
if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return; | if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return; | ||
| Zeile 74: | Zeile 75: | ||
}); | }); | ||
</script> | </script> | ||
</syntaxhighlight> | |||
|} | |} | ||
</noinclude> | </noinclude> | ||
Aktuelle Version vom 22. Mai 2026, 17:28 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 (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>
|