Tutorial :iframe height not taken into account by IE8


I'm building a dummy widget for a iGoogle/Netvibes like portal. This is a "Google Maps" widget, as it only renders a map centered on a specific location.

The widget looks good in all browsers but IE8, in which the height I specify to the <div> that contains the map is not taken into account.

Here's the interesting part of the code:

<body onload="initialize()" >    <div id="map_canvas" style="height:400px; width: 100%;"></div>    </body>  

I have no control on the portal, so the only thing I can modify is the widget itself. I also tried to set the height for the <body>, but same thing.

Any idea on why it's not working in IE?



Put this in the page you're calling with the iframe:

<script type="text/javascript">      var iframes = window.parent.document.getElementsByTagName('iframe');      for(var i = 0; i < iframes.length; i ++)      {          if(iframes[i].src == window.location)          {              iframes[i].style.height = '400px';          }      }  </script>  

If you are on 2 different domains, this isn't possible, and unfortunately there is no other way when supplying the <iframe> directly to the end-user. The best solution would be to instead give the user a script tag that generates the <iframe> tag using a document.write()

Example script tag to give to your client:

<script type="text/javascript" src="http://www.example.com/widget-getter.js?client=[clientid]&amp;widget=[widgetid]"></script>  

Contents of the script that the above tag would call:

document.write('<iframe height="400px" src="http://www.example.com/widget.html"></iframe>');  


Did you try using the height attribute of the iframe tag?

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »