Entries by JohnW

This website is the hub for the Santa Clarita Valley DotNet Users Group.

• What resources or events would you like this group to provide?


• How can this users group be most helpful to you?

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?

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:

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.

resize.zip

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

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:

If you come up with an alternate method, please post it here!

References