HTML5 and Seamless Iframes with JavaScript

The problem on March 2012

• The seamless attribute is currently not supported in any of the major browsers.
• The frameborder attribute is not supported in HTML5.
• The scrolling attribute is not supported in HTML5.
• The CSS owerflow and border style is currently not supported in iframes in IE8.
• The CSS owerlow style is currently not supported in iframes in IE9.

Examples

If you use the frameborder="0" and scrolling="no" attributes the validation service on w3.org varnings are

• The frameborder attribute on the iframe element is obsolete. Use CSS instead.
• The scrolling attribute on the iframe element is obsolete. Use CSS instead.

Here is the result of an image with my domain loaded in an iframe. It seems to be OK but it is not, the validation service tells us.

With CSS {border:0px solid white; overflow:hidden;} it seems to be OK and is OK in the latest versions of the major browsers but not in IE. Here is the result.

The solution

If you want your sites to be OK in IE and earlier versions of the major browsers you may use JavaScript. Here is the result.

Here is the code.

The solution with dynamic height

If you want to load another page seamless in the iframe you can do this if you copy and paste this code into the head of your page. I found it on a site with free scripts. The performance is good in most cases.

You then give your iframe an id and call the script on load. This is how.

© 2012 Christer Svensson