Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 941
  • Last Modified:

Resize Iframe

I want to resize the iframe depending on the the size of the document loaded
into to the iframe so that i can use IE to scroll
2 Solutions
ZvonkoSystems architectCommented:
Like this:

<IFRAME name="myiframe" onload="this.style.height=parseInt(window.frames.myiframe.document.body.scrollHeight)+50;" style="OVERFLOW: auto; WIDTH: 100%;height:100%;" src="joke.htm" frameBorder="1"></IFRAME>

anandAuthor Commented:
Thanks for u r reply,

i tried the code which u have mentioned above,
but, i dont want to use the iframe's scrolling bar instead i want to scroll using the IE 's scroll bar,how can i do that

thank u

Pravin AsarPrincipal Systems EngineerCommented:
Here is a another approach (uses iframe as buffer with auto-size of div tag).

To do this, you could have hidden iframe, and send the contents to div.
Here is an example. Only thing is the iframe page should be from your own domain.
For security purpose you can not read the external domain pages (other than yours).


<title>Using an Iframe as a Buffer</title>
<style type="text/css">
<script type="text/javascript">
function loadExternal(url) {
  if (window.frames['buffer'] ) {
    window.frames['buffer'].location = url;
    var lyr = document.getElementById? document.getElementById('MainDisplay'): document.all? document.all['MainDisplay']: null;
    if ( lyr && typeof lyr.innerHTML != "undefined" ) {
      lyr.innerHTML = '<img src="/images/loading.gif" alt="">';      
    return false;
  return true; // other browsers follow link

// called when documents loaded into iframe (from their body's onload attribute)
function displayExternal() {
  var lyr = document.getElementById? document.getElementById('MainDisplay'): document.all? document.all['MainDisplay']: null;
    if ( window.frames['buffer'] && lyr && typeof lyr.innerHTML != "undefined" ) {
      lyr.innerHTML = window.frames['buffer'].document.body.innerHTML;
<p>This is an example, how we can have dynamically sized div (using IFRAME as a buffer).</p>
<p>NOTE: All page should be from current domain! to obtain the page properties.</p>
<style type="text/css">
TD { width: 200px;}
<div id="lnks">
       <a href="page1.htm" onclick="return loadExternal(this.href)">Page1</a>
            <a href="page2.htm" onclick="return loadExternal(this.href)">Page2</a>
            <a href="page3.htm" onclick="return loadExternal(this.href)">page3</a>

<div id="MainDisplay" style="position:absolute; top: 100px; width: 600px; height:auto; ">HELLO</div>
<iframe id="buffer" style="display:none; " name="buffer" src="page1.htm" onload="displayExternal();">Sorry, your browser does not support iframes.</iframe>


Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now