Wait for iframe to load before next function is triggered?

Question

First off: I know things should be run asynchronously if possible.

I have a function, called wrap:

essentially it loads the current page as an iframe. I need it in order to keep the javascript running 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 wrap is run, i want to start manipulating the contents of the iframe. For the structure of the app, I would like need to do this from ouside of the wrap-function or with parameters that I pass in to the wrap function. I do this with a series of functions that execute animations, play sounds etc. (Stuff that takes time and should also be executed sequentially). This Is what i Would Ideally like it to look like.

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

Answer 1

jQuery can use the ready function on iframes, just the same as it can with the document. Put it inside your highlight function, and it will run after the iframe is done loading.

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

Answer 2

You could create a function:

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

And pass this function as a callback of iframe load event so this way your code would execute after the iframe was loaded