HTML5 and Seamless Iframes with JavaScript

The problem on March 2012


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

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