How to Detect Form Submission Inside an iFrame Using jQuery

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.

My Goal

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 first thing I tried was to use jQuery’s “click” function to re-size the iframe when the submit button was clicked.  Unfortunately, JavaScript has no access to material inside the iframe if it is from a different domain.  This is for security reasons.  So, that didn’t work for me.

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:

$('iframe').load(function() {
[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:

var height_val="260px";
jQuery('iframe').load(function() {
jQuery("#iframe_container").css("height",height_val);
height_val="1430px";
});

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:

<div id="iframe_container">
<iframe src="http://www.yoursite.com" scrolling="auto" frameborder="0" width="100%" height="1430px">
</iframe>
</div>

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

Shares

Please Leave a Question or Comment

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

3 Comments
Inline Feedbacks
View all comments
Anonymous
Anonymous
6 years ago

hi!

Awesome solution and is alllmost working for me.
* Issue is not adjusting for child iframe (the one loaded on embedded menu clicks)

Works for cross domain?

My requirements are
– user from individual product page (700px high)
– clicks return to full menu button in an embedded iframe
– iframe loads new page at full height (it has 100+ items)

* I’ve used on a secure, embedded i frame, here’s the essence of code, i edited for this this post…ignore errors…
div iframe-container
iframe sandbox= allow-same-origin allow-scripts allow-popups allow-forms”src=”https://embed..com” scrolling= auto frameborder=”0″ width=”100% height=”1430px” style border: 0

Thank you so much!

JB

mandlaanilnil
10 years ago

I am developing one page that page display mobile or tablet properly at the time display that page using iFrame not displaying correctly
this is my code
protected void Page_Load(object sender, EventArgs e)
{
String URL = http://www.aspforums.net/;

if (!String.IsNullOrEmpty(URL))
{

I1.Attributes[“src”] = URL;
}
}

your browser does not support IFRAMEs