Responsive parent height based on iframe height? (JS)

Need help
1

Hello all,
I’m trying to have a google slides iframe communicate with my bubble page in order to capture its height and subsequently change the parents height to contain the entire iframe. Right now its being cut-off like this:

image
image972×383 41.6 KB

I think its doing this because the iframe document is not sharing it’s properties with the rest of the page document.

I’ve tried a few solutions with JavaScript but haven’t got it to work. I’ve tried writing a simple function within the same HTML as my iframe:

<script language="javascript">
        function resizeContainer()
        {
            let iframe = document.getElementById("myiframe");
            let container = document.getElementById("container");
            container.height = iframe.contentWindow.document.body.scrollHeight;
        }
        resizeContainer();
    </script>

Haven’t gotten this work, also tried using different “window: resize” events but that didn’t work either.

Anybody know how to write a script for this? Maybe using a postMessage()? I’d prefer to not use any plug-ins. Any help is greatly appreciated, thank you!

2

This topic was automatically closed after 70 days. New replies are no longer allowed.