Home/ Questions/Q 7063317
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:41:58+00:00

http://jsfiddle.net/fJkBU/1/ That’s my code. Basically, I have an iFrame whose source may change. I

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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,

    • 0