Handleiding voor automatisch aanpassen van de hoogte van het iframe

Het is mogelijk om een iframe automatisch de goede hoogte mee te geven. Hiervoor kun je van de volgende code gebruikmaken:

<iframe src="URL VAN HET IFRAME" style="width:100%;height:450px" frameborder=0 scrolling="auto" id="UNIEK ID VOOR HET IFRAME"></iframe>
<script>
window.addEventListener('message', function(e) {
    var origin = event.origin || event.originalEvent.origin;
    if (origin.match(/JOUW RECRASNAAM\.recras\.nl/)) {
        document.getElementById('UNIEK ID VOOR HET IFRAME').style.height = e.data.iframeHeight + 'px';
    }
});
</script>

Vervolgens hoeven er nog slechts drie onderdelen te worden aangepast:

  1. De URL van het iframe
    Dit moet het adres van het iframe worden, https://demo.recras.nl/onlineboeking bijvoorbeeld.
  2. Het unieke ID voor het iframe
    Verzin hier een unieke identificatie, recrasiframe1 bijvoorbeeld. Let op: het ID mag geen spaties bevatten en moet op twee locaties worden aangepast. Gebruik exact dezelfde identificatie op beide plekken.
  3. Jouw Recras-naam
    De Recras-naam vind je in de adresbalk wanneer je bent ingelogd. Voor https://demo.recras.nl/ is dat bijvoorbeeld ‚demo‘.