Develop Reference

iframe height not downsizing after longer page content

Using the David Bradshaw iFrame Resizer code for dynamic iframes.
Initially, it works and set's the appropriate height of the iframe to the content.
But when the user clicks a link to go to another page within the iframe, the height doesn't downsize if the content is less. If the content is more, it'll upsize just fine.
I've tried using the various attributes for heightCalculationMethod, all the same results. I look into the content of the iframe of the smaller pages and what I'm seeing is an html table(that doesn't have a defined height) then a huge gap underneath inside the body tag(which also doesn't have a defined height).
What am I missing here?
Here is my script..
<script>
iFrameResize({
log:true,
enablePublicMethod:true,
heightCalculationMethod:'lowestElement'
});
</script>
Is it possible to just reset the iframe height?

Quoted from https://github.com/davidjbradshaw/iframe-resizer
IFrame not downsizing
The most likely cause of this problem is having set the height of an
element to be 100% of the page somewhere in your CSS. This is normally
on the html or body elements, but it could be on any element in the
page. This can sometimes be got around by using the taggedElement
height calculation method and added a data-iframe-height attribute to
the element that you want to define the bottom position of the page.
You may find it useful to use position: relative on this element to
define a bottom margin or allow space for a floating footer.
Not having a valid HTML document type in the iFrame can also sometimes
prevent downsizing. At it's most simplest this can be the following.

Setting heightCalculationMethod to 'bodyScroll' helped me in a same case:
go from a page inside iframe with iframeResizer.contentWindow.min.js placed to another page without this script.
I use iFrame Resizer v3.5.8

How can I structure the HTML for these requirements

I am developing a system where I will display content in a browser in an embedded application. The normal browser navigation controls cannot be used but instead will have javascript running in a wrapper round the page. The content will be coming from the same domain but I cannot pre-process the content. Needs to be compliant with IE8+ and latest of FF and chrome.
The things the javascript needs to do are..
Load in new content
Detect when the content has fully loaded
Set focus to elements
Detect which link currently has focus
Retrieve lists of links on the page
Trigger links
What is the best way to place the content html pages within the wrapper page? eg
frames
iframe
div

Both iframes and divs could work. The final choice will depend on the details of your implementation, and is also a matter of personal taste.
With divs, the html becomes part of your wrapper page. The risk is to have conflicts between the inserted content and the rest of the page (css, html ids for example).
An iframe creates a sandbox and avoids conflicts. The downside is that the layout is not easy to adjust as the content lives in its own document. html5 introduces new iframe attributes like "seamless", but they won't work in IE8.

As above, Iframes may be best; however they are deprecated and don't always give the best results. An alternative would be to set a div for the content, and Ajax the content into the frame. You can then access it through the dom to get links etc.
To decide which would be best I would consider what content is being loaded - full HTML documents (with doctype, head, metadata etc) will be problematic without I frames.
If the content being loaded is just plain text, maybe with a few basic HTML elements, I would ajax it into a div

Running jQuery with dynamic content when I need the size

I've got a page in my web app that dynamically loads a view containing html and some javascript. The javascript basically renders a chart into the view that's been retrieved. The issue is that the chart library I'm using (flot) requires that the container it is being rendered into has a width and height.
When the javascript is being executed, the CSS rules haven't been applied to the container and it doesn't have a size. How can I wait until the CSS has been applied before the javascript runs?

In JQuery, you can do
$(window).load(function()
{
//code fires after the layout has been calculated/rendered
});
The doesn't work if you have javascript changing CSS after the page has already been loaded tho...so be sure any JS changing CSS happens before anything else you're about to do

Turns out I was simply being a complete idiot!
I was passing the container ID to flot without the "#" so it wasn't finding a container at all. The CSS rules have been applied when the view is returned and it's now working fine :)

avoiding css overlaps while loading div with a url

I am loading url in a div, as div is loaded with url it includes css file which are disturbing my parent page layout. i want to restrict the css to that loading div only, so it may not disturb the other contents on page. I don't want to use iframes as there is some dragdrop work with jquery and it doesn't support a nice way to drag elements from parent page to iframe.
is there any solution?

Assuming you are using the jQuery load function with something similar to:
$('#mydiv').load(myUrl);
You can select only the HTML you are interested in from the loaded page by appending a selector to the url (see jQuery docs for Loading Page Fragments):
$('#mydiv').load(myUrl + ' #content');
If you require the full page at the url to be rendered using it's own CSS, then the only reliable way of sandboxing this from your own page is using an iframe.

give your parent's elements a specific class/id name, and use that class/id name in your css as the specific selector

Add only div specific css code in that css file.

Dynamically Resizing an Iframe

I can see that this question has been asked several times, but none of the proposed solutions seem to work for the site I am building, so I am reopening the thread. I am attempting to size an iframe based on the height of it's content. Both the page that contains the iframe and it's source page exist on the same domain.
I have tried the proposed solutions in each of the following threads:
Resize iframe height according to content height in it
Resizing an iframe based on content
I believe that the solutions above are not working because of when the reference to body.clientHeight is made, the browser has not actually determined the height of the document.
Here is the code I am using:
var ifmBlue = document.getElementById("ifmBlue");
ifmBlue.onload = resizeIframe;
function resizeIframe()
{
var ifmBlue = document.getElementById("ifmBluePill");
var ifmDiv = ifmBlue.contentDocument.getElementById("main");
var height = ifmDiv.clientHeight;
ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height || 500) + 5 + 'px';
}
If I debug the script using fire debug, the client height of the iframe.contentDocument's main div is 0. Additionally, body.offsetHieght, & body.scrollHeight are 0. However, after the script is finished running, if I inspect the DOM of the HTML iframe element (using fire debug) I can see that the body's clientHeight is 456 and the inner div's clientHeight is 742. This leads me to believe that these values are not yet set when iframe.onload is fired. So, per one of the threads above, I moved the code into the body.onload event handler of the iframe's source page. This solution also did not work.
Any help you can provide is much appreciated.
Thanks,
CJ

DynamicDrive has such a script, which I think does what you're asking for.
There's also a newer version now.
2011 update:
I would strongly recommend using AJAX over something like this, especially considering that a dynamically resizing iframe only works across the same domain.
Even so, it's a bit iffy, so if you absolutely must use AJAX over standard page loading, you really, really should use things like history.pushState (and have standard page loading as a fallback for browsers that don't support it). There's a jQuery plugin which handles this stuff for you, written by a GitHubber, called pjax, which they use only for repo navigation.

you moved the handler? maybe you should move the function to the inner frame as well, so that when you grab height values you reference the body directly rather than frame object... then call a parent.set height function
another trick, call function after settimeout of 10 msecs
i remember I had that problem once but I used IE's getBoundingClientRect() to get height of content, check mozilla developer center for something similar, this is just a hint, i did not research it
on another note, what is ifmBluePill? is it the iframe? or a div inside of it? why do you reference "contentDocument" of a div?

By the way, DynamicDrive improved their script to always resize even if the iframe contents change: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
From their page:
This is version II of the original
Iframe SSI script, which like the
original script lets you seamlessly
display external content on your page
via an IFRAME. It does this by
dynamically resizing the IFRAME to be
the height of the page contained
within it, eliminating any possible
IFRAME scrollbars from appearing while
snugly showing the entire external
content. Think of it as SSI (server
side includes) emulated using DHTML!
This script works in both IE5+ and
NS6+, and for other browsers, supports
the option to either completely hide
the iframe in question or display it
using its default height.
Now, this script differs from the
original in that you can load
additional documents* into the IFRAME
even after the page has loaded, and
the IFRAME will dynamically adjust its
height to fit the new document. So use
this script if you need to not only
display external content via the
IFRAME tag, but intend to change this
content after the page has loaded.