Wait for the iframe to load before the next function starts?

Question

First: I know that things should be done asynchronously, if possible.

I have a function called wrap:

essentially it loads the current page as an iframe. I need this to keep javascript working even when links are clicked on the page.

function wrap(){ event.preventDefault(); var pathname = window.location.pathname; $('body').html('<iframe id="wrapper" src="'+ pathname +'" >') $('iframe').load(function (){ //this is where the magic outght to happen }); } 

When the transfer is done, I want to start manipulating the contents of the iframe. For the structure of the application, I would like to do this from the ouside of the wrap function or with the parameters that I pass to the wrap function. I do this with a number of functions that perform animation, play sounds, etc. (Material that takes time, and must also be performed sequentially). This is what I would ideally want it to look like.

 wrap(); highlight('#one'); highlight('#two'); 

Answer 1

jQuery can use a ready-made function in an iframe, just like in a document. Put it inside your highlight function and it will run after the iframe loads.

 $("iframe").ready(function (){ // do something once the iframe is loaded }); 

Answer 2

You can create a function:

  function iframeready() { // code after iframe is loaded } 

And pass this function as an iframe load event callback so that your code will execute after the iframe loads