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.

Lateritious

does iframe load test.tld page? – Sulphate

Yes, that works without a problem – Lateritious

how do you know "the command isn't executed"? – Sulphate

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. – Lateritious

err, you are "logged in"? try: <iframe src="http://www.w3schools.com" onload="alert('test')" /> – Sulphate

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 <a id="ctl00_ctl00_bLogout" class="logoutlink" href="javascript:__doPostBack('ctl00$ctl00$bLogout','')">(Logout)</a> – Lateritious

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? – Sulphate

Yes: function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } – Lateritious

use browser developer tools (F12) to debug – Sulphate

javascript is case sensitive. Should it be onLoad instead of onload? – Domineca

The reason why you dont have jquery available is because its Telerik. It uses its own internal jquery. – Avar

Answer 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>

Adeno

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

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',''); } } – Lateritious

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

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> – Lateritious

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) – Adeno

@Adeno '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); }); – Rajasthan

@Lateritious 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 – Bb

Answer 2

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

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

    console.log(e.target);

} );

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

Scallop

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

@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://mcmap.net/q/53240/-addeventlistener-vs-onclick – Rizal

Answer 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>

Indistinguishable

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> – Indistinguishable

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. – Indistinguishable

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

Answer 4

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 
});

Cardsharp