Detecting the onload event of a window opened with

Question

 window.popup = window.open($(this).attr('href'), 'Ad', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
 $(window.popup).onload = function()
        {
                alert("Popup has loaded a page");
        };

This doesn't work in any browser I've tried it with (IE, Firefox, Chrome). How can I detect when a page is loaded in the window (like an iframe onload)?

Answer 1

This did the trick for me; full example:

HTML:

<a href="/my-popup.php" class="import">Click for my popup on same domain</a>

Javascript:

(function(){
    var doc = document;

    jQuery('.import').click(function(e){
        e.preventDefault();
        window.popup = window.open(jQuery(this).attr('href'), 'importwindow', 'width=500, height=200, top=100, left=200, toolbar=1');

        window.popup.onload = function() {
            window.popup.onbeforeunload = function(){
                doc.location.reload(true); //will refresh page after popup close
            }
        }
    });
})();

Answer 2

var myPopup = window.open(...);
myPopup.addEventListener('load', myFunction, false);

If you care about IE, use the following as the second line instead:

myPopup[myPopup.addEventListener ? 'addEventListener' : 'attachEvent'](
  (myPopup.attachEvent ? 'on' : '') + 'load', myFunction, false
);

As you can see, supporting IE is quite cumbersome and should be avoided if possible. I mean, if you need to support IE because of your audience, by all means, do so.

Answer 3

As noted this answer's https://stackoverflow.com/a/3030893 aka Detecting the onload event of a window opened with window.open solution is ideal:

javascript: /* IE will use 1 ignore 1 w/ error, FF t'other way 'round */
 (function(ow){
   ow . addEventListener(  'load', function(){alert("loaded")}, false);
   ow .      attachEvent('onload', function(){alert("loaded")}, false);
  }(window.open(prompt("Where are you going today?",location.href),"snapDown")))

However, other comments and answers perpetrate several erroneous misconceptions as explained below.

The following script demonstrates the temperamental temporal fickleness of defining onload. Apply the script to a fast loading location.href such as file:/// and some slow site to see the problem. It is possible to see either onload message or none at all (by reloading a loaded page all 3 variations can be seen). It is also assumed that the page being loaded itself does not define an onload event which would compound the problem.

The onload's event handler definitions are definitely not "inside popup's HTML markup" though they will ultimately reside in the DOM of the body ... of the HTML.

javascript:
window.popup=window.open(location.href,'snapDown');
window.popup.onload=function(){alert("message one ")};
alert("message 1 maybe too soon\n"+window.popup.onload);
window.popup.onload=function(){alert("message two")};
alert("message 2 maybe too late\n"+window.popup.onload);

what you can do:

• open a foreign URL
• on that foreign URL pg. address bar enter a javascript: ... URI
  it will inherit the same-site policies as the foreign URL
  NB. the javascript may need to be bookmarked as a bookmarklet since address bar URI javascript:'s are not effective in recent (circa 2012) browsers
• this effectively gives cross domain access but note:
  1. the javascript is not indigenous to a web page or site, meaning it's origin has a stateless nationality and thus intrinsically satisfies css (x-site scripting) and sop (same origin policy) immigration rules
  2. it is invoked manually via the address bar or bookmarks AND
     the script is manually entered into those locations

Thus any page, well almost, irregardless of origin, can be modified like:

javascript:
  if(confirm("wipe out links & anchors?\n"+document.body.innerHTML))
     void(document.body.innerHTML=document.body.innerHTML.replace(/<a /g,"< a "))

(well almost ...
jar:file:///usr/lib/firefox/omni.ja!/chrome/toolkit/content/global/aboutSupport.xhtml
Mozilla's FF troubleshooting page and other jar archives are exceptions)

As another example:
To routinely disable google's usurping of target pg. hits, change it's rwt function as follows:

javascript:void(rwt=function(unusurpURL){return unusurpURL})

and bookmark this as spay google (neuteralize google?) ie. it's "fixed".

This bookmark is then clicked before any google hits are clicked, so bookmarks of any of those hits are clean and not the mongrelized perverted aberrations that google made of them.

tests done with

window.navigator.userAgent=
Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:11.0) Gecko/20100101 Firefox/11.0

It should be noted that addEventListener in Mozilla only has a non-standard fourth, boolean parameter which,, if true allows untrusted content triggers to be instantiated for foreign pages.

ref:
element.addEventListener | Document Object Model (DOM) | MDN:
Interaction between privileged and non-privileged pages | Code snippets | MDN:

Bookmark:
Detecting the onload event of a window opened with window.open

Answer 4

If the pop-up's document is from a different domain, this is simply not possible.

Update April 2015: I was wrong about this: if you own both domains, you can use window.postMessage and the message event in pretty much all browsers that are relevant today.

If not, there's still no way you'll be able to make this work cross-browser without some help from the document being loaded into the pop-up. You need to be able to detect a change in the pop-up that occurs once it has loaded, which could be a variable that JavaScript in the pop-up page sets when it handles its own load event, or if you have some control of it you could add a call to a function in the opener.

Answer 5

onload event handler must be inside popup's HTML <body> markup.