I have an iFrame embedded on a website. The iFrame's height can vary from 2,000+ pixels to a couple hundred pixels in height.
The iFrame embed looks like so:
<iframe frameborder="0" src="path" width="100%" height="800"></iframe>
What I am after is if the iFrame is larger than the parent frame the parent frame expands to the height of the iFrame. If the iFrame is smaller than the parent frame the parent frame resizes to the height of the iFrame.
The goal is to prevent scrollbars in the iFrame or excessive space in the parent frame.
How do I do this?
My thought is, if possible, check the height of the iFrame (once loaded with content, not the preset height) then I can run a function to resize the parent page. I am unsure how to check the iFrame height.
Note: The iFrame is on a separate domain. I do not control the HTML or JS of the iFrame, however, I can add CSS to the iFrame page. (The iFrame is hosted elsewhere but allows me to control the CSS but nothing else.) Also I am using jQuery 2.1 on the page.
