Vorlage:TransparenteIFrames: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 27: | Zeile 27: | ||
! Werbeform !! Position !! Code | ! Werbeform !! Position !! Code | ||
|- | |- | ||
| Value Ad || | | Value Ad || Komponente 1 || <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 38: | Zeile 38: | ||
</script></syntaxhighlight> | </script></syntaxhighlight> | ||
|- | |- | ||
| Value Ad || | | Value Ad || Komponente 2 und 3 || <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 107: | Zeile 107: | ||
</script></syntaxhighlight> | </script></syntaxhighlight> | ||
|- | |- | ||
| Value Ad || | | Value Ad || Komponente 1 || <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 120: | Zeile 120: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|- | |- | ||
| Value Ad || | | Value Ad || Komponente 2 und 3 || <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; | ||
Aktuelle Version vom 9. Juni 2026, 15:04 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) => {
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 && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark';
});
</script>
| |
| Value Ad | Komponente 1 | <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 && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark';
});
</script>
|
| Value Ad | Komponente 2 und 3 | <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>
|
| Rollover-Event | In jeder Werbeform | <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>
|
| Sliding Skin | P2 | <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 && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark';
});
</script>
|