Technische Spezifikationen

Vorlage:TransparenteIFrames: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(5 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 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.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';
   });
   });
Zeile 24: Zeile 27:
! Werbeform !! Position !! Code
! Werbeform !! Position !! Code
|-
|-
| Value Ad || Top || <syntaxhighlight lang="html"><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></syntaxhighlight>
</script></syntaxhighlight>
|-
|-
| Value Ad || Left/Right || <syntaxhighlight lang="html"><script>
| 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
|-
| 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></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>
</script></syntaxhighlight>
Zeile 43: Zeile 88:
}}</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 53: Zeile 98:
| Page Skin || || <syntaxhighlight lang="html"><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 (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark';
     
  });
      if (origin !== referrer || event.data.type !== "iqdIframeTransparency") return;
     
      if (event.data.htmlNeedsColorScheme && event.data.isFirefox) document.querySelector('html').style.colorScheme = 'dark';
    });
</script></syntaxhighlight>
</script></syntaxhighlight>
|-
|-
| Value Ad || Top || <syntaxhighlight lang="html"><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';
   });
   });
Zeile 68: Zeile 120:
</syntaxhighlight>
</syntaxhighlight>
|-
|-
| Value Ad || Left/Right || <syntaxhighlight lang="html"><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 (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';
Zeile 76: Zeile 131:
</script>
</script>
</syntaxhighlight>
</syntaxhighlight>
|-
| Rollover-Event || In jeder Werbeform || <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>
|-
| 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>
Abgerufen von „https://techspecs.iqd-ao.de/de/index.php?title=Vorlage:TransparenteIFrames“