Iframe height to height of the content inside

0 votes
31 views
asked Mar 17 by anonymous

Can someone please explain how to set the iframe height equal to the height of the content inside

Thanks

2 Answers

0 votes
answered Mar 17 by Suleman Asghar

You can set the Iframe height Dynamically by using this code. Let me know if you still have any confusion

              <html>
<head> <title>Parent frame</title> </head>

        <body onload=”resizeFrame(document.getElementById(‘childframe’))” bgcolor=”#cccccc”>

       <script type=”text/javascript”>
     // Firefox worked fine. Internet Explorer shows scrollbar because of frameborder
      function resizeFrame(f) {
    f.style.height = f.contentWindow.document.body.scrollHeight + “px”;
   }
  </script>

 <p>Parent frame.</p>
<p>Parent frame.</p>
<p>Parent frame.</p>
<p>Parent frame.</p>
 <p>
<iframe frameborder=0 border=0 src=”./child-frame.html” name=”childframe”        id=”childframe”>
 </iframe>
</p>

</body>
</html>
0 votes
answered Mar 17 by Edward

There is no solution out there that works 100% on all browsers to make iframe height to the content inside but you can try

<iframe src="hello.html"
 onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
</iframe>

alternatively i suggest you to use jquery.load() to load html content inside a div instead of using an iframe.

e.g.

<div id="iframe-alternative"></div>

$("#iframe-alternative").load("hello.html")

and you can style your div .

Using iframe is very bad practice, and there is a debate out there to remove . If your website is accessible via <iframe on some other domains you may become the victim of clickjacking.

Welcome , qPocho is an online community for programmers share there knowledge.
...