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');
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 .
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).
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.
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
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With