Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wait for iframe to load before next function is triggered?

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');
like image 335
Himmators Avatar asked Feb 26 '13 21:02

Himmators


People also ask

How do you call a function after an iframe is loaded?

To call a JavaScript function when iframe finished loading, we can add an event listener for the load event. to add an iframe. to select the iframe with querySelector .

Do iframes slow down page load?

So, you should not use iframe excessively without monitoring what's going on, or you might end up harming your page performance. To avoid having your iframes slow down your pages, a good technique is to lazy load them (i.e., loading them only when they are required like when the user scrolls near them).

How do I know if an iframe is loaded?

To check if iframe is loaded or it has a content with JavaScript, we can set the iframe's onload property to a function that runs when the iframe is loaded. document. querySelector("iframe"). onload = () => { console.


1 Answers

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
});
like image 122
MattDiamant Avatar answered Oct 19 '22 19:10

MattDiamant