0

I have a document that looks like:

<iframe source="http://example.com/" style="width:100%; height:100%"></iframe>
<form action="//example.com/foo" method="post">
  <input type="hidden" name="foo" value="bar">
</form>
<script>
$(function(){
  $('form').submit();
});
</script>

The concept is to show the content of the iframe while the form is submitting, as and interstitial step.

The problem is, the browser aborts the request to the iframe source when the form is submitted, so even when the form submission takes a while, the iframe remains blank.

I found up that deferring the form submission in 50ms does the job, but it feels hacky.

Any ideas why it wouldn't load and what is the proper way to override it?

u.k
  • 3,091
  • 1
  • 20
  • 23

1 Answers1

2

If you want to wait until the iframe is loaded, use:

<script>
$(function(){
    $('iframe').on('load', function() {
        $('form').submit();
    });
});
</script>

Alternatively, you can post the form asynchronously so it doesn't prevent the iframe from loading, but then you need to handle the server response in Javascript. For that, you may find this thread useful: jQuery - Send a form asynchronously

Community
  • 1
  • 1
Hamza Kubba
  • 2,259
  • 14
  • 12
  • The goal is to submit the form and get the user to the next step ASAP, redirecting to the form's action URL - and showing the iframe while loading. I don't want to optimize on showing the iframe and then submit the form, cause it would make the flow slower. I also can't post using ajax, because the form action is no a different domain. – u.k Oct 15 '13 at 02:43
  • Then you want the asynchronous option... though then you can't really redirect as well. You probably want to simply drop the HTML in the AJAX response into the page. You can do something like $('body').html(htmlFromServer); You can post using ajax to other domains... – Hamza Kubba Oct 15 '13 at 02:49
  • Actually, I'm not 100% sure this will work, but try to replace `'iframe'` with `document` (no quotes around document), and `'load'` with `'ready'` in my example above. That might do what you want without too much hassle... what that should do is wait till the current page is 'ready', which means that at least all the elements on the page should have completed rendering, and I believe that won't force the browser to wait until the iframe is done rendering... – Hamza Kubba Oct 15 '13 at 02:52
  • async wouldn't work because: a. cross-domain xhr. b. the form's action is on a different domain that I have no control over. I am not looking for a workaround, but more for the reason why the browser is aborting the iframe load to begin with. – u.k Oct 15 '13 at 02:57
  • Ah, well the reason is simple... it's like clicking a link on a page, while the page is still loading. The browser stops loading the current page and starts to load the new page, because that's more efficient. – Hamza Kubba Oct 15 '13 at 02:59
  • Any references for this statement ? – u.k Oct 15 '13 at 03:02
  • Hmmm, I don't have the references, I can just tell you from experience that submitting a form is like clicking a link to go to another page, and also from experience, I can tell you that browsers stop rendering the current page when you change URLs to go to another page. Sorry I can't help you with an 'official' thing or whatever, I'm not even sure you can find that without digging through the code of the different browsers... plus this behavior is likely not defined anywhere. Different browsers will probably behave differently in this scenario. – Hamza Kubba Oct 15 '13 at 03:04
  • Ah, this makes sense in general. I was looking for a "scientific" answer, but it does make sense. – u.k Oct 15 '13 at 03:20