July 22, 2018 UPDATE
The laughter just keeps on coming. The CSS only solution below worked on my iPhone so I thought I was good to go. Turns out it wasn't working on my desktop computer. So, now I'm going back to a JavaScript solution, but, way simpler compared to my original post below. This is just adding an onload one-liner to the iframe:
<iframe src="//yoursite.com/path/to/whatever" style="border: none;" onload="this.width=screen.width;this.height=screen.height;"></iframe>
So far, so good on my phone and my desktop.
July 21, 2018 UPDATE
Well, this is funny. Feel free to use the solution under "My original post" below. But, I've realize these days plain old CSS works. I feel like CSS didn't always work and that's why there are JavaScript solutions out there. But, this CSS solution works for me! So simple!
<div style="position:relative;height:100%;">
<iframe src="https://yoursite.com" style="height:100%;width:100%; border:none"></iframe>
</div>
My original post
If you use the Pages extension, there's a good chance you'll want to use iframes. Why? Because that's an easy way to pop in a contact form, or, anything else which you may want to embed in a page. But, getting an iframe's height just right is annoying and doesn't automatically change if the iframe's content changes.
JavaScript and whoever this person is, to the rescue! There are tons of solutions out there, and I tried a few. But, this is the only one that just worked without having to do any debugging. It's very simple too. You pop in an external script tag into the page with the actual iframe content, and then pop the other script into the Flarum page. That's it. I didn't have to tweak anything. It just works. No errors in my error console either (which happens a lot with random code I find).
https://github.com/FaiblUG/setIframeHeight
The "child" script goes in the actual iframe page, and the "parent" script goes into your Flarum page.
