Vorlage:TransparenteIFrames: Unterschied zwischen den Versionen

Aus Technische Spezifikationen
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
 
(6 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;
     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';
     if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark';
   });
   });
</script>
</script></syntaxhighlight>
|}
|}
}}}|
}}}|
Zeile 24: Zeile 27:
! Werbeform !! Position !! Code
! Werbeform !! Position !! Code
|-
|-
| Value Ad || Top || <script>
| Value Ad || Komponente 1 || <syntaxhighlight lang="html"><script>
   window.addEventListener("message", (event) => {
   window.addEventListener("message", (event) => {
     if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return;
     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';
     if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark';
   });
   });
</script>
</script></syntaxhighlight>
|-
| Value Ad || Komponente 2 und 3 || <syntaxhighlight lang="html"><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></syntaxhighlight>
|}
}}}|
}}
{{#if:{{{rolloverEvent|}}}|{{{
{| class="wikitable"
|-
! Werbeform !! Position !! Code
|-
|-
| Value Ad || Left/Right || <script>
| Rollover-Event || In jeder Werbeform || <syntaxhighlight lang="html"><script>
   window.addEventListener("message", (event) => {
   window.addEventListener("message", (event) => {
     if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return;
     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';
     if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark';
   });
   });
</script>
</script></syntaxhighlight>
|}
}}}|
}}
{{#if:{{{slidingSkin|}}}|{{{
{| class="wikitable"
|-
! Werbeform !! Position !! Code
|-
| Sliding Skin || P2 || <syntaxhighlight lang="html"><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></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 96:
! Werbeform !! Position !! Code
! Werbeform !! Position !! Code
|-
|-
| Page Skin || || <script>
| Page Skin || || <syntaxhighlight lang="html"><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></syntaxhighlight>
|-
| Value Ad || Komponente 1 || <syntaxhighlight lang="html"><script>
   window.addEventListener("message", (event) => {
   window.addEventListener("message", (event) => {
     if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return;
     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';
     if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark';
   });
   });
</script>
</script>
</syntaxhighlight>
|-
|-
| Value Ad || Top || <script>
| Value Ad || Komponente 2 und 3 || <syntaxhighlight lang="html"><script>
   window.addEventListener("message", (event) => {
   window.addEventListener("message", (event) => {
     if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return;
     const referrer = new URL(document.referrer).hostname;
 
    const origin = new URL(event.origin).hostname;
     if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark';
   
    if (origin !== referrer || event.data.type !== "iqdIframeTransparency") return;
   
     if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark';
   });
   });
</script>
</script>
</syntaxhighlight>
|-
|-
| Value Ad || Left/Right || <script>
| Rollover-Event || In jeder Werbeform || <syntaxhighlight lang="html"><script>
   window.addEventListener("message", (event) => {
   window.addEventListener("message", (event) => {
     if (event.origin !== "https://www.sueddeutsche.de" || event.data.type !== "iqdIframeTransparency") return;
     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';
     if (event.data.htmlNeedsColorScheme) document.querySelector('html').style.colorScheme = 'dark';
   });
   });
</script>
</script></syntaxhighlight>
|-
| Sliding Skin || P2 || <syntaxhighlight lang="html"><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></syntaxhighlight>
|}
|}
</noinclude>
</noinclude>

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>
Abgerufen von „https://techspecs.iqd-ao.de/de/index.php?title=Vorlage:TransparenteIFrames&oldid=4544“