Monday, October 27. 2008
Autofitting iFrame
I presented this technique at the SoCal Code Camp, on 10/26/08.
Some errors here were corrected 11/12/08. All code-fragments and files have been updated.
Introduction
Does your iFrame step through multiple pages of varying heights? Or, does the height of the remote page change frequently? Do you find that the height of your iFrame is sometimes too short, cutting off the bottom of the remote page? Is your iFrame sometimes too tall, pushing down your content far beneath the embedded page?
Then this technique is for you.Look here for an example. Fill out the survey to see the autofit in action. Each page of the survey inside the iFrame is a different height. Watch the iFrame resize to accommodate each page:
http://laptopacademy.net/wordpress/signup
This technique requires that you are able to edit the remote web-page. It requires a bit of script, and you’ll need to upload a couple of files to your web-host.
Your visitors must have javascript enabled, which, according to several sources i checked, is about 95% of all users. This method includes a fall-back, for users without javascript.
Explanation
Normally, the parent page is unable to see the height of the remote page embedded in the iFrame. This is a security restriction in browsers, as a security precaution. The assumption is that the page in the iFrame is in a different domain.
Here's the trick--we embed a hidden iFrame inside the visible iFrame. That hidden iFrame is in the same domain as the parent page. Therefor, the parent page is able to communicate with the hidden iFrame.
To pass the height of the content in the visible iFrame up to the parent web-page, the LoadHiddenIframe script in the remote page embeds it's height in the url of the hidden iFrame. Then, the parent page is able to grab the height from the src of the hidden iFrame, and then resize the visible iFrame.
Add the following attributes to your iFrame tag
Name the iFrame, so the javascript functions can find it:
name="surveyFrame" id="surveyFrame"
Then give your iFrame a height tall enough to accommodate your tallest possible remote-page. This is the fallback, for users who do not have javascript:
When you’re done, it will look something like this:
<iframe src="http://laptopacademy.signup.sgizmo.com/" name="surveyFrame" id="surveyFrame" style="overflow: hidden" allowtransparency="true" frameborder="0" height="600" scrolling="no" width="100%" align="center"></iframe>
Upload Files To Your Web Host
Download the following file, called “autofit.zip”, and unzip it.
Then upload the files to the same directory as the location of your webpage which contains your survey iFrame. Advanced coders can put them into a “scripts” directory, or other standard folder.
WordPress users should put them outside your WordPress directory, to avoid any conflicts.
Make note of the full path to the files you just uploaded to your web server-- this is the public “http” path to the files.
Script Your Remote Page
Add the following code to the bottom of the remote page's HTML, right before the closing </body> tag.
<iframe id="HiddenIframe" width="1" height="1" style=" position : absolute; top : 0px; left : 0px; visibility: hidden; "></iframe>
<script type="text/javascript" src="http://MYWEBSITE.COM/scripts/resize.js"></script>
<script>loadHiddenIframe("http://MYWEBSITE.COM/scripts/hiddeniframe.html")</script>
You MUST change the urls to point to the files you just uploaded to your server.
SurveyGizmo users should go to the SurveyGizmo.com/Edit Survey/”Look and Feel” page, scroll down to “This Theme’s HTML Template”, scroll to the bottom of the html template, and paste the code at the bottom. Don’t forget to click the ’save’ button.
Done!
Give it a try. Load up your web-page in your browser, and then navigate through each remote page in the iFrame. The iFrame height should shrink and expand to accommodate the remote page.
Notes
- Height Properties -Explanation of scrollheight and offsetHeight
- Browser Differences - At the time of this writing, all browsers tested will expand the height of the iFrame and parent page as needed. However, Firefox is the only browser which shrinks the parent page, when the the iFrame shrinks to a shorter height than the height hard-coded into the visible iFrame. IE shrinks the iFrame, but leaves a gap on the page beneath the iFrame. Chrome does not shrink the iFrame at all, but Chrome and IE both expand the height of the iFrame correctly.
- The solution to all of these problems is to hard-code a very short height into the hidden iFrame, which will produce a correctly sized iFrame, without undesireable rendering artifacts, on all browsers-- EXCEPT browsers without javascript enabled.
- Transparency - If you want to see the background of the parent web-page behind the iFrame content, then the "allowtransparency" attribute in the iFrame is required for Internet Explorer. It's not required for other browsers. This assumes that the remote page has a background color of "transparent".
- Scroll Up - As the user pages through the remote page in the iFrame, the parent page is of course not getting refreshed. As a result, the parent page will not scroll up to the top of the iFrame-- your user is forced to manually scroll up. To automatically scroll up the parent page when the iFrame refreshes, do the following:
- Insert this attribute into your visible iFrame:
onload="scrollUp()" - Insert the following tag underneath your visible iFrame:
<script type="text/javascript"> function scrollUp(){this.scroll(0,0);} </script>
Alternative Methods
The method above is the simplest way I have found to achieve cross-domain scripting.
Some clever programmer might see a way to implement this method without adding any code to the remote web-page. For example, maybe you could load the remote page into a variable, and then inject the extra tags into the variable. Maybe some solution involving the DOM? One issue, in that case, may be maintaining state, so that when the client browser submits the remote page, the remote server receives the submitted page correctly.
There are limitations to putting data into the url of the hidden iFrame, as described in the Tagneto reference, below. There is only so much information you can put into a url-- about 1K of data.This is fine for our simple height example, but if we want to do anything more data-intensive, we need a more robust method. Perhaps there are other ways the remote page can put the height information into the web page loaded into the hidden iFrame, besides it's url. Keep in mind, it's the remote page, which is in a different domain, which must be able to place it's height info. A control of some kind in the hidden page?
There are a couple of other, more complicated, top-heavy, or esoteric ways to do cross-domain scripting, which may require the use of third-party code-libraries. Here are some resources:
- http://blog.slajax.com/2008/07/23/javascript-cross-domain-ajax/
- http://directwebremoting.org/
- http://web.archive.org/web/20071122180703/http://blog.cbciweb.com/articles/2006/11/08/ajad-asynchronous-javascript-across-domains
- The tagneto reference below mentions postMessage as a possible solution.
If you come up with an alternate method, please post it here!
References
I was at the code camp session sitting in the front row!
I'll see if I can come up with alternate solutions.
So detect for postMessage and use that when possible, then fall back to fragment IDs.
If that is the case, Microsoft has placed new limitations on setting the parent (and child?) locations with different #values that may not work as expected in IE 8. I am not aware of the details, but postMessage was mentioned as the way to work around those issues.
I think the issue is the permissions on parent/child frames changing urls with fragment IDs in other frames.
I could be misunderstanding the technique though.
but i believe the technique uses query-strings (which get passed to the server, and are preceded by a question-mark), and not fragment id's (which do not get passed to the server, and are preceded by the # pound-sign "hash-mark").
http://andrew-ford.com/stw/node63.html
here's the script-line which loads the hidden iframe:
iframe.src = path + '?height=' + height;
so maybe i was incorrect to reference the tagneto article.
is support of query strings going to change?
So that should still work, sorry for the confusion.
Tested fine on IE 8 beta 2. See Notes above re browser differences.
There is a tiny tiny problem. The download link http://uploadingit.com/files/914996_sbtif/resize.zip doesn't work any more (file not found).
Thanks
I did want to raise one issue (which I resolve below). Cross domain security issues will still arise if a user access your site with http://somedomain.com/parentPage.htm, and your child page uses loadHiddenIframe("http://www.somedomain.com/hiddeniframe.html");, or vice-versa.
To resolve this, here is what I came up with (in 3 steps):
1- CHANGE resize.js to the following:
function QueryString(key)
{
var value = null;
for (var i=0;i
Im no professional scritper though I think this script could be my answer to my prayers,
though wasnt sure if it was still compatible?
many thanks
J:)
so not good if you need to call the remote iframe and dont want to have it auto resized. I need some iframes resized, i need some left alone so get the below error on page if I dont add the top attributes to every local iframe field.
Message: 'null' is null or not an object
Line: 26
Char: 2
Code: 0
URI: http://www.mydomain.com/resize.js
regards
Jason
http://boxstr.com/files/4208942_69kfi/resize.zip
Thanks.
Geoff
