1

http://jsfiddle.net/fJkBU/1/

That's my code. Basically, I have an iFrame whose source may change. I need the containing DIV to expand vertically to accomodate whatever is inside the iFrame.

I can't get it to work. Any ideas?

MY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>Ruby on Rails: Welcome aboard</title>
  </head>
  <body>
    <div id="page">
      <div id="content">

        <div id='commentLoader' style="width: 500px;">
            <iframe id="commentIframe" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
        </div>
      </div>
    </div>
  </body>
</html>
Shamoon
  • 41,293
  • 91
  • 306
  • 570

6 Answers6

12

All the other methods will not work, because...

...Mozilla (and all other major browsers, as pointed out in paislee's comment) has this thing called the "Same Origin Policy" which states:

The same origin policy prevents a document or script loaded from one origin from getting or setting properties of a document from another origin.

Essentially, Mozilla makes sure you cannot access another webpage's properties thru JavaScript because that would be a security hazard (for cookie hijacking and such I believe).

For example, here was a similar question when discussing an iframe for a page of the same origin; here is the answer as applied to your problem. As you can see in Firefox's error console, your "permission denied to access property document"...

Ok, so you have a couple of options now that you know you can't access the iframe's height thru JavaScript (because it is hosted on another domain):

  1. Change it so you do control the contents of the iframe (then either put it under the same domain or use the solution posted in the similar question).

  2. Assuming 1 is not possible you have to use your server to access the webpage. The first option here would be to screen scrape the contents of the iFrame and then display it

    • If you aren't up for writing a screen scraper you could use a proxy script and then display an iframe of your proxy (hosted on the same server); this would permit you to access the site as if it we're your own and the user would notice no difference (Note: I'm pretty sure this is against all terms of service/possibly illegal as the user could try to interact with the website (unaware it is loaded thru a proxy) in the iframe (i.e. login)... and you would effectively be phishing)

  3. I am assuming that what is loaded in the iframe is a set of comments (IDs kind of gave it away), and I will also take the liberty of assuming each comment has a fixed height or maximum height. In which case you could write a php script that loads the page, counts the amount of comments (regex) and then multiplies number that by comment height to determine the appropriate height of the iframe

Good luck,

Community
  • 1
  • 1
Tomas Reimers
  • 3,234
  • 4
  • 24
  • 37
  • 1
    Same Origin Policy is broader than Mozilla, all browsers implement it. http://en.wikipedia.org/wiki/Same_origin_policy – calebds Jan 17 '12 at 21:16
  • This security is too restrictive. Where is the harm in checking the dimensions of a document and an event that fires when the document has finished loading? – Matthew Jan 20 '12 at 10:56
  • Actually I think the problem will solve itself when browsers support the `seamless` attribute on iframes (if they ever do so). – jcayzac Jan 24 '12 at 12:15
0

At the very most you'll get an iFrame to be the size of the window, not the contents' height. And, as you seem to want it to expand, why not just make the iFrame 100% height of the window from the start?

Deadlykipper
  • 878
  • 2
  • 7
  • 18
0

If the iFrame's loaded from the same domain you can try the Iframe SSI script II. I used this script way back for a class project but you can give it a shot.

Mukul
  • 17
  • 4
0

I'm not sure I get your answer 100%, but if you want a container that expands vertically due to the content you can use jquery ajax. when you load content inside a it will generate a new height. give this div some style, and you have yourself a dynamic generated div height. basically, you will take this other page and put it on yours.

Do a search for cross-domain ajax. I've used it in the past and it wasn't pretty but worked!

Daku Daku
  • 115
  • 4
  • 10
-2

Call the below Javascript function in Iframe onload event.

function autoResize(id)
    {
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
    }
    document.getElementById(id).height= (newheight) + "px";
}

e.g:

<iframe id="commentIframe"  onload="autoResize('commentIframe')" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
sjngm
  • 12,423
  • 14
  • 84
  • 114
Om Prakash Shakya
  • 13
  • 1
-2

You've got single quotes around your CSS id. Replace them with double quotes like the rest of your code.

Change:

id='commentLoader'

to:

id="commentLoader"
jhilgert00
  • 5,479
  • 2
  • 38
  • 54
  • Quotes are optional and can be either single or double quotes. – 6twenty Jan 24 '12 at 13:03
  • dependes if it's xhtml you must use commas. if it's html are optionals. – ncubica Jan 24 '12 at 17:23
  • Quotes NOT optional when declaring CSS identifiers. On another note, if you are copying and pasting any significant amount of code, especially from blogs, sometimes the formating changes to the upside down and rightside up quotes, which causes an error, or rather nothing to happen in your CSS. – jhilgert00 Jan 25 '12 at 20:45