Set iframe to height of content for remote content

Question

The question of how to make your iframe fit 100% of your content (using JavaScript) has been answered on the forum already... for iframes displaying content from the same domain only.

My questions: Is it possible to resize an iframe to fit the content when the iframe src attribute is for a page outside of the domain of the page containing the frame? The browser security features surrounding cross-site scripting prevent me from accessing the document object for the iframe.

I'm looking for any creative solution. One of my thoughts was to somehow detect that scrollbars were visible on the iframe, and to incrementally increase the height until they weren't. Unfortunately I can't find any way to detect visible scrollbars either. Ideas?

Please note that I am looking for a client-side solution.

Responses:

---

Dave

The problem still exists - I don't know the height of the remote document ahead of time, so I can't set it from a database or querystring value.

---

dusoft

100% on the iframe in CSS will not set it to 100% of the content inside the iframe, but relative to the the page or containing element (i.e., a div or something).

Answer 1

(My answer to a similar question)

It is not possible to do this without some control over the page being iframed because of the browser's security model. If it was possible, that would be a security problem and would have to be fixed.

Although letting the embedding site know the height of a third party webpage when embedded in the page seems harmless, this can leak information to the embedding site that the browser's user wants to keep private. For example, http://www.facebook.com/ renders differently depending on whether or not you are logged in, so if my website can work out the height of <iframe src="http://www.facebook.com/"> then I can work out whether or not you are a facebook user, something you probably don't want me to know.

The information leakage would be similar to the infamous CSS History Leak which browser vendors had to plug.

Answer 2

Is it possible to resize an iframe to fit the content when the iframe src attribute is for a page outside of the domain of the page containing the frame?

It is possible to get around the cross-site limitation and have an iframe set to the height of it's content, but it can be a bit awkward to get it to work.

The solution involves working around the security model by having the iframed content itself iframe a page on the the same server as the parent page, with which it can communicate. I've answered a similar question to this before here, which goes in to a fair bit of detail on the ins and outs of setting it all up.

The caveat on the described approach is that you must have means of getting your iframed content to itself iframe a page on the parent server. This is usually achieveable when the iframed content is there as part of an agreed partnership between sites, but YMMV.

Answer 3

It sounds like you are trying to work around a security feature that was put in place for a good reason...

Does the resizing have to be through script? You could redirect to a page where the size of the iframe is taken from a querystring, or a database, or config file, etc.

Answer 4

what about using 100% in CSS? scrollbars can be disabled in iframe, but then user won't be able to scroll.

that's the JS/XSS prevention, so get over it and try to pull the content on the server side and serve it via local connection.

Answer 5

This is theoretical as I have not tested it:

1) PHP save the remote page into a local html file using file_get_content() or using CURL. 2) Javascript load local file into iframe - it's now local and security issues don't apply.

If there are javascript vars or Session vars (which cannot be pulled from remote content) you can at least use this technique to query the document height of your local file, set the iframe accordingly, then load the remote URL into the resized iframe.

Cavat: you have no way of knowing URLs for page changes within the remote page, therefore you can only use this technique on the first page. If the remote pages are all same height this is no problem.

Answer 6

not the best solutions but you can try:

javascript to write iframe, in iframe app set the current height in url #h700 for 700px etc; then use a loop to listen for that change on host site "in the javascript" to read the src="url#h700" and set the height of the iframe by that.