iFrame onload JavaScript event

Question

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.

Because I am still logged in. If I click on the "Logout" button on the site which will trigger the command I am logged out. — Peleke
– Peleke, Commented Mar 24, 2015 at 14:40
err, you are "logged in"? try: <iframe src="http://www.w3schools.com" onload="alert('test')" /> — Igor
– Igor, Commented Mar 24, 2015 at 14:43

Legion · Accepted Answer · 2019-09-03 09:55:56Z

68

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>

edited Sep 3, 2019 at 9:55

Legion

7916 silver badges24 bronze badges

answered Mar 24, 2015 at 13:41

Jasper

8315 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jasper Over a year ago

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

Peleke Over a year ago

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 Over a year ago

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

Peleke Over a year ago

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','')">(Logout)</a>

Jasper Over a year ago

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)

|

antelove · Accepted Answer · 2020-02-28 07:58:17Z

27

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

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

    console.log(e.target);

} );

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

edited Feb 28, 2020 at 7:58

answered Jan 4, 2018 at 15:35

antelove

3,37830 silver badges20 bronze badges

2 Comments

rasen58 Over a year ago

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 a year ago

@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

Samvel Aleqsanyan · Accepted Answer · 2018-04-21 20:37:43Z

11

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>

edited Apr 21, 2018 at 20:37

Samvel Aleqsanyan

2,9574 gold badges22 silver badges28 bronze badges

answered Apr 11, 2017 at 0:42

technocrusaders.com

3012 silver badges6 bronze badges

3 Comments

technocrusaders.com Over a year ago

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 Over a year ago

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 Over a year ago

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

Collectives™ on Stack Overflow

iFrame onload JavaScript event

3 Answers 3

7 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related