Question

I have the following code:

  function callIframe(type, cat) {
    var send = false;
    var axel = Math.random() + "";
    var a = axel * 10000000000000;
    var iframe = $('<iframe src="http://domain.com/;src=12345678;type=' + type + ';cat=' + cat + ';ord=' + a + '?" width="1" height="1" frameborder="0" ><iframe>');    
    $('body').append(iframe);   
  }          

and:

$("a").click(function(e){  
  var $form = $(this).parent();
  callIframe("signu903", "hptes318");  
  $form.get(0).submit();  
});           

My issue is the form is submitting before the contents of the iframe are fully loaded. I know a callback would address this issue but I am then reliant on the iframe loading to submit the form. I am just looking or best practice in this case.

Note: I do not have any access to the iframe code.

Thanks in advance,

JN

Answer 1

Try using a setTimeout so that it will wait x seconds for the iframe to load, and if it doesn’t load in the allotted amount of time, it submits anyway.

try this function:

function callIframe(type, cat) {
    var send = false;
    var axel = Math.random() + "";
    var a = axel * 10000000000000;
    var iframe = $('<iframe src="http://domain.com/;src=12345678;type=' + type + ';cat=' + cat + ';ord=' + a + '?" width="1" height="1" frameborder="0" ><iframe>');
    $('body').append(iframe);
    return iframe;
}​

and then this code

$("a").click(function(e) {
    var $form = $(this).parent();
    var iframe = callIframe("signu903", "hptes318");
    iframe.load($form.get(0).submit);
    setTimeout($form.get(0).submit,5000);
});​

If the iframe takes longer than 5 seconds to load, the form submits anyway.

you may need to add more logic to prevent the submit from happening twice.