dynamically resizing page body after iframe reduction

I have a page that uses an iframe to display cross-domain information. That part works as expected. The iframe resizes according to content. However, although the page grows to accommodate the iframe content, the body does not shrink back when the iframe is reduced in size. Instead, the page will display a blank space below the frame. How can I shrink the size of the body back to it's original size, that is to say, assure that the space below the iframe is also resized accordingly. At present, it grows as needed but does not shrink if the content in the iframe becomes shorter.

Thanks in advance for any direction...

 

That's simply a matter of the hell that is iframes -- which is why usually the best advice is to just not use them; just as one probably shouldn't be trying to circumvent the cross-domain browser policy.

But that's us security and accessibility minded folk who payed attention to specifications and accessibility guidelines butting heads with "But I want to do this anyways" sleaze.

 

A short and to the point answer would be don't use iframes. Try to restructure the page to use responsive columns and grab the content you need and try to display it there - it's way more secure and reliable.

 

Thank you, but these non-answers are not helpful. I WANT my clients to be able to use my services from iframes in their pages. And my clients want (and are willing to pay) for this service. IFrames are used for things like Google/Yahoo Maps all over the web. The link back to my site from the iframe content is also beneficial. There are plenty of controls in place covering the cross domain issues. That's besides the point. I was looking for info on how to reference the body of the page in javascript, getting the current size and triggering a reset on the excess growth of the page. I know this is possible.

As for 'responsive columns' this is beyond the scope of ability for most clients compared to a simple iframe snippet code I can supply them to put on their page.

Thanks again for any help.

 

If you want the parent size in the iframe, you would use the window.parent object to get sizes, etc. However, you would need to have the user give your domain access.

I am still not clear on what needs to happen. Do you want to resize your iframe according to the size of the includer? If so, you would need a different approach:

- Require the user to put a "tag" on their website, which is a js page.
- That js page, will do things it would need (in your case, attach a page resize event listener to your iframe).
- Construct and include the iframe to the page.

This will give you more control over the page as well (you can even remove/alter the actual page content), which requires trust. This is how ad networks usually do things.

 

Crazy idea... are you using internal links on the iframe? If not, you could pass the width and height "onresize" as a hash in the URI since you CAN access the iframe's SRC. You point at a bullshit ID like #size_768x842 that would be easy enough to parse the value of. It's one of the few places the cross domain blocking policy isn't applied. Just updated it "onresize" and "onload" in the included content, and then monitor the src with DOMAttrModified in the parent page. (admittedly you might have to use a timer to check that in older browsers instead since that's a new event) - then have that event handler resize the iframe.

Pain in the ass and an accessibility mess though; pretty much why I question why anyone would be DUMB ENOUGH to ... well...

But I do have the nasty habit of underestimating the stupidity of the average client and their willingness to basically plow themselves.

 

I also got hit by a similar problem. I found this script as a solution and worked https://github.com/Sly777/Iframe-Height-Jquery-Plugin