The conventional wisdom is that you have no visibility on what goes on inside an iframe on your site. That is mostly true but it turns out that you can detect when a form is submitted inside an iframe.
I was given the task to fix a website bug of the following nature: There is an iframe containing a “submit” button. When the Submit button is pressed, new content is loaded into the iframe and the size of the iframe gets much larger. Unfortunately, the containing window does not get larger and ugly scroll bars appear. My task was to make the window get bigger and eliminate the scroll bars. Seems easy, right?
The Solution: jQuery “load()”
After searching around the Internet for a while, I stumbled upon a strong hint: the jQuery “load” method. I could use this to trigger an event when the iframe loaded:
[re-size a div which contains the iframe here]
After playing with this, I noticed that the load event was triggered when the page first loaded as well as when the submit button inside the iframe was pressed. It had to set different window sizes in each case. Here’s how I did it:
The iframe height is initially set to 260px on page load, but the height_val variable is set to 1430px for the next trigger. When the user presses the “Submit” button, the iframe re-loads and becomes 1430 pixels tall. The iframe itself should be set to the bigger of the two sizes like this:
<iframe src="http://www.yoursite.com" scrolling="auto" frameborder="0" width="100%" height="1430px">
The jQuery code should come after the HTML. Make sense?
If you want a solution that works for more than two different iframe sizes, check out this article, which mentions a plug-in that does it.
Let me know what you think! – Brian