iFrame onload JavaScript event

javascript iframe dom-events onload onload-event

225,834

Solution 1

Use the iFrame's .onload function of JavaScript:

<iframe id="my_iframe" src="http://www.test.tld/">
    <script type="text/javascript">
        document.getElementById('my_iframe').onload = function() {
            __doPostBack('ctl00$ctl00$bLogout','');
        }
    </script>
    <!--OTHER STUFF-->
</iframe>

Solution 2

document.querySelector("iframe").addEventListener( "load", function(e) {

    this.style.backgroundColor = "red";
    alert(this.nodeName);

    console.log(e.target);

} );

<iframe src="example.com" ></iframe>

Solution 3

Your code is correct. Just test to ensure it is being called like:

<script>
function doIt(){
  alert("here i am!");
  __doPostBack('ctl00$ctl00$bLogout','')
}
</script>

<iframe onload="doIt()"></iframe>

225,834

Author by

Peleke

Updated on July 09, 2022

Comments

Peleke almost 2 years
I have an iFrame, where I want to send a JavaScript command after loading. My current code looks like this:
```
<iframe src="http://www.test.tld/" onload="__doPostBack('ctl00$ctl00$bLogout','')">
```
But with this code the command isn't executed. What must I change to make it work? Only Chrome and Firefox have to be supported.
Jasper about 9 years

maybe you can take a look at the native javascript version of this subinsb.com/jquery-to-javascript)
Peleke about 9 years

That also doesn't seem to work: <iframe src="test.tld" id="loadTo"> xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status==200){ document.getElementById("loadTo").innerHTML = __doPostBack('ctl00$ctl00$bLogout',''); } }
Jasper about 9 years

i changed my code to javascript. I hope this'll work, haven't tested it myself. @Peleke
Peleke about 9 years

Thanks, but that also doesn't do anything. Maybe it is not possible!? The code of the logout button on the site is <a id="ctl00_ctl00_bLogout" class="logoutlink" href="javascript:__doPostBack('ctl00$ctl00$bLogout','')">(Lo‌gout)</a>
Jasper about 9 years

take a look at this on liveweave.com/9ngqqd i have it working here (try changing the url from the iframe to load some big pages)
technocrusaders.com almost 7 years

try: <!DOCTYPE html> <html lang="en"> <head> <script> function doIt(){ alert("here i am!"); } </script> </head> <body> <iframe onload="doIt()" src="sdsd.com"></iframe> </body> </html>
technocrusaders.com almost 7 years

Ensure the URL being loaded into the iframe is allowed to be loaded, "check out the output in Chrome Development tools for loading erros". As if it's not allowed to be loaded the onload event will never be called. When I ran this code the URL "sdsd.com" did not have any restrictions and no loading errors. try it.
technocrusaders.com almost 7 years

ensure the L in load is lower case, so "l" not "L" . so onload="doIt()" not onLoad="doIt()"
reljicb almost 6 years

@Jasper 's answer was almost correct. It was only missing httpS for the src of the iframe. HTML: <iframe src="example.com" ></iframe> JavaScript: document.querySelector("iframe").addEventListener("load", function() { this.style.backgroundColor = "red"; alert(this.nodeName); });
MrMesees over 4 years

@Peleke the reason your XHR is different is that it's not an iframe. addEventListener('load', () => { /* code when loaded */ }) is, I believe what you'll want for an iframe
rasen58 over 3 years

What's the difference between this way of adding the "load" listener vs the other answer where they set iframe.onload = a function?
Karan over 3 years

@rasen58, they both do exactly the same thing. The advantage of addEventListener is that you can add more than one event listener to the load event. Please refer this answer for more details. stackoverflow.com/a/6348533/9695286