Load iframe before leaving the page

Question

I have this problem:

User clicks to a link to the other page. When this event occurs i want to load an iframe. I need to load that iframe before new page will start loading.

How can I do that?

edit:

I have code as fallow:

function letsDoThis(parameter)
{
    var iframe=document.createElement('iframe');
    iframe.src="http://xxxxxxxxx"+parameter;
    iframe.width='1';
    iframe.height='1';
    document.body.appendChild(iframe);
}
var a=$('#MY_BUTTON')[0].href;
$('#MY_BUTTON')[0].addEventListener('click',function(){letsDoThis(a);});

but in this solution iframe doesn't load at everytime (sometimes new page will start loading too fast).

Answer 1

Using jQuery, you may easily solve this:

 $('body').on('click', 'a#MY_BUTTON', function(e) { e.preventDefault(); var url_a = $(this).attr('href'); var ifr=$('<iframe/>', { id:'DynamicIframe', src:'http://stackoverflow.com/', style:'width:1px; height: 1px;', load:function(){ console.log('iframe loaded!'); //document.location.href = url_a; alert(url_a); } }); $('body').append(ifr); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href='http://www.google.it/' id='MY_BUTTON' >Click!</a> 

You should change the url of the iframe passing parameters that you need and in case of more iframe and link to control, manage everything through classes and not by ID