Dynamic height for iframes

  • Updated

With this solution, you get an automatic adjustment of an iframe's height based on its content, thereby avoiding an unsightly and annoying scrollbar.

Please note that implementing this solution requires a certain level of technical knowledge.

Add the following code to the website that will contain the iframe(s):

<script>const getIframeHeight = e => { e.contentWindow.postMessage({ getIframeHeight: { iframeId: e.getAttribute("id") } }, e.src) }; window.addEventListener("message", e => { if (e.data.iframeHeight && e.data.iframeId) document.getElementById(e.data.iframeId).style.height = e.data.iframeHeight + "px" });</script>

Each iframe will then need a unique id and onload attribute as shown in the example:

<iframe id="/ett unikt id här/" onload="getIframeHeight(this)" style="border: none; width: 100%; height: 600px;" src="https://..." scrolling="no"></iframe>

The solution works for iframes that link to Ungapped’s surveys, landing pages for events, and web versions of email and newsletters.