How to use onload even of an iframe programmatically with js?

I have this iframe I create with js, this is the code I have so far:

<script>
function loadIframe(url) {
    ifr = document.createElement("IFRAME");
    ifr.setAttribute("src", url);
    ifr.style.width = "800px";
    ifr.style.height = "600px";
    document.body.appendChild(ifr);
    ifr.onload = ready();
} 

function ready() { alert("ready") };

window.onload = function () {
    loadIframe("http://www.wallpaperpimper.com/wallpaper/Landscape/Ocean开发者_StackOverflow中文版/Big-wave-1-S79KZQKBWP-1600x1200.jpg");
}
</script>

The iframe gets created but the ready() funcion fires before the iframe loads the content, what I basically wants to do is:

<iframe onload="ready()" src="http://www.wallpaperpimper.com/wallpaper/Landscape/Ocean/Big-wave-1-S79KZQKBWP-1600x1200.jpg"></iframe>

That works fine, the ready() function fires once the iframe content is loaded, but I want to do it all from js.

I can't use onload inside the body on the pages loaded into the iframe because I don't own them.

How should I set the onload event?

---

By doing this:

ifr.onload = ready();

You're executing the ready function and assigning the results to irf.onload instead of assigning a reference to the ready function to the onload property. So I think you meant to do:

ifr.onload = ready;

So assigning a reference to the ready-function to the onload property instead of executing it.