Menu
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:
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.
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).
381
You can use the JavaScript contentWindow property to make an iFrame automatically adjust its height according to the contents inside it, so that no vertical scrollbar will appear.
Using the window. postMessage() method, we can safely communicate between the iframe and the parent window. That way, we can send a height value from the iframe to the parent window. Then, in the parent window, we can set a simple script to dynamically update the height of the iframe.
(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.
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
