Place the following code in the parent document (the document that will include the iFrame) and change #myIframe to the ID of the iFrame you want to resize. Note: You will need to include the jQuery library for this code to work.
Follow the instructions below to implement the solution into your project, which works in FireFox, Chrome, IE and Safari (and perhaps all others). There are many examples of doing this on the internet, but unfortunately most of these examples only work in old browsers, new browsers have many restrictions for the interest of security and now new methods are required to perform the requirements.īelow is my solution to this problem, which works on all modern browsers using event listeners to pass information between the parent and child frame in the browser. I've seen allot of developers requesting the ability to resize a iFrame so that the content in the iFrame fits in the frame without any scroll bars, but also to adjust the height dynamically so that is always fits the height of the internal content, which is useful for iFrames who's content changes often or when using iFrames in a site that is responsive and adapts to the browser it is loading in. So as long as your component/element doesn't respond to the height of the iframe it seems to mostly works OK.There is a Mobile Optimized version of this page (AMP). Iframes cannot be scrolled on iOS, and the "flattening" is buggy because otherwise the iframe's size would potentially explode. Unfortunately there nothing we can do about this. It seems WebKit, just "flattens" sometimes, It seems in some cases it resizes/reflows correctly.Īs you can imagine this causes a TON of bugs. As the values suggest, scrolling:yes provides scroll bars to the.
Now if WebKit would keep updating the size of the iframe element, it would just keep on growing.