Vorlage:TransparenteIFrames: Unterschied zwischen den Versionen

Aus Technische Spezifikationen
Zur Navigation springen Zur Suche springen
← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(8 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<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.
{{#if:{{{pageskin|}}}|{{{
{| class="wikitable"
|-
! Werbeform !! Position !! Code
|-
| Page Skin || || <syntaxhighlight lang="html"><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></syntaxhighlight>
|}
}}}|
}}
{{#if:{{{valuead|}}}|{{{
{| class="wikitable"
|-
! Werbeform !! Position !! Code
|-
| Value Ad || Top || <syntaxhighlight lang="html"><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></syntaxhighlight>
|-
| Value Ad || Left/Right || <syntaxhighlight lang="html"><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></syntaxhighlight>
|}
}}}|
}}</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 in der HTML-Datei hinzugefügt werden vor dem schließenden <syntaxhighlight lang="html" inline></body></syntaxhighlight>-Tag eingebunden werden.
 
 


{| class="wikitable"
<syntaxhighlight lang="html"><script>
|-
! Werbeform !! Position !! Code
|-
| 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 (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></syntaxhighlight>
</script></syntaxhighlight>
|-
| Value Ad || Top || <syntaxhighlight lang="html"><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>
</syntaxhighlight>
|-
| Value Ad || Left/Right || <syntaxhighlight lang="html"><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>
</syntaxhighlight>
|}
</noinclude>

Aktuelle Version vom 20. Juli 2026, 15:07 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 in der HTML-Datei hinzugefügt werden 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>
Abgerufen von „https://techspecs.iqd-ao.de/de/index.php?title=Vorlage:TransparenteIFrames&oldid=4579“