if(document.getElementById('myIframe').readyState == 'complete')

I need a solution for auto-adjusting the width and height of an iframe to barely fit its content. The point is that the width and height can be changed after the iframe has been loaded.

resize the iFrame after the contents are modified

All solutions given thus far only account for a once off resize.

Make iframe automatically adjust height according to the contents without using scrollbar? [duplicate] Ask Question

onload="setIframeHeight(this)"

There is one situation where iframes are (almost) required: when the contents of the iframe is in a different domain, and you have to perform authentication or check cookies that are bound to that domain. It actually prevents security problems instead of creating them. For example, if you're writing a kind of plugin that can be used on any website, but the plugin has to authenticate on another domain, you could create a seamless iframe that runs and authenticates on the external domain.

Iframes can have similar issues as frames and inconsiderate use of XMLHttpRequest: They break the one-document-per-URL paradigm, which is essential for the proper functioning of the web (think bookmarks, deep-links, search engines, ...).

The most striking such issue is probably that of deep linking: It's true that iframes suffer from this to a lesser extent than frames, but if you allow your users to navigate between different pages in the iframe, it will be a problem.

If you're creating an actual, informational web page, stick to frameless HTML, CSS and unobstrusive JavaScripts and keep in mind that the page should still be usable with scripting disabled.

I normally try to figure out if that's a good solution for the problem before resorting to iframes. Sometimes, however, an iframe just does the job better. It maintains its own browser history, helps you segregate CSS styles if that's an issue with the content you're loading in.

that's a point, but I would say the opposite, when entering credit card data I would rathre prefer to be entirely in the Verified By Visa (Paypal) webpage (with the url easily visible in the address bar) rather that entring my credit card data in an iframe of someone's website.

Then recently I was shopping at the John Lewis website, and they brought up the Verified By Visa page in an iframe - wonderful! I'm still looking at the John Lewis site, and all that's happening is I'm being asked for my Verified By Visa password - no problem. Although as a web developer I know that there's no technical difference between that and a plain old redirect-there-redirect-back, the user experience is so much better!

As soon as you're displaying content from another domain, you're basically trusting that domain not to serve-up malware. There's nothing wrong with iframes per se. If you control the content of the iframe, they're perfectly safe.

IFRAME element may be a security risk if any page on your site contains an XSS vulnerability which can be exploited

Your browser window is basically just one big iframe.

many a tech manager has siezed on them as a solution to many problems. In fact, they create more.

if used for parameterized content, they've created an interface. And in a professional site, that interface requires an SLA and version management - which are almost always ignored in rush to get online.

And if your framed content has a need to be interactive, it will struggle to do so beyond the frame.

Usually, if you can do it without an iframe, that is a better option. I'm sure others here may have more information or more specific examples, it all comes down to the problem you are trying to solve.

think about them as a text/markup equivalent to the way a video or another media file would be embedded

The downside is that if you introduce multiple layers of scrolling (one for the browser, one for the iframe) your users will get frustrated. Like adzm said, you don't want to use an iframe for primary navigation

on the other hand, documents from different origins can still communicate using window.postMessage(), for example to implement collaborative iframe auto-resizing.

However I've seen iframes abused as well. It should never be used as an integral part of your site, but as a piece of content within a site.