How to run a function right after contents of an iframe are loaded?

Question

I am currently using :

function printThing(){ 
    let link = parent.document.getElementById("oLink").href; 
    console.log(link); 
}

if (window.attachEvent) {window.attachEvent("onload", printThing);} 
else if (window.addEventListener) {window.addEventListener("load", printThing, false);} 
else {document.addEventListener("load", printThing, false);}

To get a link from the contents of an iframe (which uses srcdoc instead of src) and print it in the console. This code will be added to some stored html before being sent to the frontend.

Is there a way to trigger this once the iframe content is loaded (ie without having to wait for other content in the app)? I tried replacing all the window with document but it doesnt work (it does nothing).

I need to access elements from inside the iframe and change their attributes.

@IMustBeSomeone will this wait for the contents? iframe loads with the parent, but the content (html) might take more time to render. Ill try and see — Mohamad Moustafa, Jul 03 '19 at 15:52
Possible duplicate of [iFrame onload JavaScript event](https://stackoverflow.com/questions/29233928/iframe-onload-javascript-event) — , Jul 03 '19 at 15:53
@ChrisG no it isnt, my code needs to execute INSIDE the iframe. since it uses elements from inside it. Also I need for the content of the iframe to load, not just the iframe. — Mohamad Moustafa, Jul 03 '19 at 15:54

score 2 · Accepted Answer · 2019-07-03T18:59:28.707

HTML

This method simply uses the onload attribute to invoke the function once the contents of the frame have been loaded.

<iframe id="some_frame" onload="on_iframe_load(this)">
    ....
</iframe>

Obviously, make sure the on_iframe_load(_this) function is in your JS code. To explain further why we pass this into the on_iframe_load(), understand that passing this from a DOM element will pass the reference to the element.

<script>
var on_iframe_load(_this) = () => {
    _this.contentDocument.getElementById("something_in_this_frame").doWhatever(...);
}
</script>

Pure JS

If HTML doesn't float your boat, you can use onload or addEventListener("load", ...) and then access the elements inside the iframe using an element pointer and contentDocument (No IE?)

<script>
document.getElementById("some_frame").onload = function() { // or you could use `addEventListener("load", function(){...})`
    this.contentDocument.getElementById("some_element_in_frame").doThing(...)
}
</script>

so I can then use ```this``` to access elements in the iframe? — Mohamad Moustafa, Jul 03 '19 at 16:04
The code works. I just need to check if it does what I want (which might take time). Dont worry I never forget to checkmark answers (I upvoted since I learned a new thing from your answer). Also, I wanted to know if it was possible to call the function from the body inside the iframe and pass a reference to the iframe. Something like `````` — Mohamad Moustafa, Jul 03 '19 at 17:03

How to run a function right after contents of an iframe are loaded?

1 Answers1