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, Mar 24 '15 at 14:40
That's being displayed. Isn't it possible to log out with onload command inside of the iframe? The code of the logout button on the site is (Logout) — Peleke, Mar 24 '15 at 14:59
It is possible to do many things. Why in your case the to `__doPostBack` does not work - I don't know. Is function `__doPostBack` even present in the page? — Igor, Mar 24 '15 at 15:03
Yes: function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } — Peleke, Mar 24 '15 at 15:18
javascript is case sensitive. Should it be `onLoad` instead of `onload`? — Nick.Mc, Jul 11 '17 at 06:06
The reason why you dont have jquery available is because its Telerik. It uses its own internal jquery. — crthompson, Oct 10 '17 at 16:43

score 64 · Answer 1 · edited Sep 03 '19 at 09:55

64

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 03 '19 at 09:55

Legion

760
6
23

answered Mar 24 '15 at 13:41

Jasper

791
4
9

maybe you can take a look at the native javascript version of this https://subinsb.com/jquery-to-javascript) – Jasper Mar 24 '15 at 14:12
1

That also doesn't seem to work: xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status==200){ document.getElementById("loadTo").innerHTML = __doPostBack('ctl00$ctl00$bLogout',''); } } – Peleke Mar 24 '15 at 14:39
i changed my code to javascript. I hope this'll work, haven't tested it myself. @Peleke – Jasper Mar 24 '15 at 14:55
Thanks, but that also doesn't do anything. Maybe it is not possible!? The code of the logout button on the site is (Logout) – Peleke Mar 24 '15 at 15:02
take a look at this on http://liveweave.com/9ngqqd i have it working here (try changing the url from the iframe to load some big pages) – Jasper Mar 24 '15 at 15:35
@Jasper 's answer was almost correct. It was only missing http**S** for the src of the iframe. HTML: JavaScript: document.querySelector("iframe").addEventListener("load", function() { this.style.backgroundColor = "red"; alert(this.nodeName); }); – reljicb Jun 28 '18 at 21:43
@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 – MrMesees Jan 17 '20 at 09:52

antelove · Answer 2 · 2020-02-28T07:58:17.457

25

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 '20 at 07:58

answered Jan 04 '18 at 15:35

antelove

3,216
26
20

3

What's the difference between this way of adding the "load" listener vs the other answer where they set iframe.onload = a function? – rasen58 Aug 24 '20 at 16:56
1

@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. https://stackoverflow.com/a/6348533/9695286 – Karan Nov 20 '20 at 04:55

score 10 · Answer 3 · edited Apr 21 '18 at 20:37

10

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 '18 at 20:37

Samvel Aleqsanyan

2,812
4
20
28

answered Apr 11 '17 at 00:42

technocrusaders.com

195
1
6

try: – technocrusaders.com Jun 26 '17 at 02:17
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 "http://sdsd.com" did not have any restrictions and no loading errors. try it. – technocrusaders.com Jun 26 '17 at 02:22
1

ensure the L in load is lower case, so "l" not "L" . so onload="doIt()" not onLoad="doIt()" – technocrusaders.com Jul 03 '17 at 00:17

score -5 · Answer 4 · answered Jan 08 '21 at 14:49

-5

Update

As of jQuery 3.0, the new syntax is just .on:

see this answer here and the code:

$('iframe').on('load', function() {
    // do stuff 
});

answered Jan 08 '21 at 14:49

Scott Wardlaw

652
1
8
13

iFrame onload JavaScript event

4 Answers4

Linked