Karine Caimo

Digital (analytics) addict

Responsive Iframes

Iframes zijn vervelend…

als je ze door middel van een iframe-tag in html <iframe> op een pagina plaatst hebben ze een vaste hoogte en zijn ze dus een hel voor responsive websites. Scrollbars in het midden van de pagina, vreemde effecten als je naar een volgende pagina surft binnen de iframe om nog maar te zwijgen naar de cross domain tracking van de volledige customer journey.

Status van fondsen AG Insurance

Maar er is hoop! Intussen is het mogelijk via javascript ervoor te zorgen dat de iframe zich aanpast in de hoogte afhankelijk van de inhoud die zich wijzigt als je in de iframe verder begint te surfen.

Responsive iframes met behulp van javascript

Indien de website waarop je de iframe plaatst op https staat dient ook de website binnen je iframe op https te staan. Om ervoor te zorgen dat de communicatie tussen de 2 sites m.b.v javascript niet geblokkeerd wordt door je site is het ook best dat de iframe gehost staat op hetzelfde domein als je hoofdsite of een subdomein.

Met behulp van een eventlistener stuur je van de ene site naar de andere de hoogte door van de viewport.

In de site die in de iframe wordt gestoken plaats je dit script in de <head> van de pagina.

<script>
var iFrameResizer = {
messageCallback: function(message) {
alert(message,parentIFrame.getId());
}
}</script>
<script type=”text/javascript” src=”iframeResizer.contentWindow.min.js” defer></script>

iframeResizer.contentWindow.min

Op de pagina waar de iframe geplaatst wordt plaats je dit script:

<script>
var win = document.getElementById(“MSOPageViewerWebPart_WebPartWPQ1”).contentWindow;function listener(event){
document.getElementById(‘MSOPageViewerWebPart_WebPartWPQ1’).style.height = event.data + ‘px’;
}if (window.addEventListener){
addEventListener(“message”, listener, false)
} else {
attachEvent(“onmessage”, listener)
}window.setInterval(function(){
win.postMessage(
300,
“*”
)
}, 100);
</script>

 

Qualifio, een tool waarmee je interactieve campagnes zoals quizzen en polls kan integreren in je site, doet iets gelijkaardigs met hun embed script om de hoogte en breedte van het spel zich automatisch te laten aanpassen aan de inhoud (In oude browsers zoals IE8 moet je wel een hoogte meegeven). Voorbeeld hieronder:

 

  • Which one(s) of the following elements is/are important to you?
  • How often do you wash your clothes?
  • Which type of clothes do you wear most?
  • How many people are there in your family?

Verder Bericht

Vorige Bericht

Laat een reactie achter

© 2019 Karine Caimo

Twitter Facebook LinkedIn Instagram