How to determine if content in popup window is loaded

Question

I need to set some contextData for a popup window from its parent. I try this:

var some contextData = {};
$(function() {
    $('#clickme').click(function() {
        var w = window.open('http://jsfiddle.net');

        w.contextData = contextData            
        //w.context data is null in the popup after the page loads - seems to get overwritten/deleted
    });
});

It doesn't work, so my next thought, wait until content is loaded

var some contextData = {};
$(function() {
    $('#clickme').click(function() {
        var w = window.open('http://jsfiddle.net');
        w.onload = function() {
            //Never Fires
            w.contextData = contextData;

        }
    });
});

See this fiddle . My onload method never fires.

This works:

var some contextData = {};
    $(function() {
        $('#clickme').click(function() {
            var w = window.open('http://jsfiddle.net');
            setTimeout(function(){
                if(w.someVariableSetByThePageBeingLoaded) {
                    w.contextData = contextData;
                }
                else{
                    setTimeout(arguments.callee, 1);
                }

            }, 1);
        });
    });

But has obvious elegance problems (but is the current work around).

I know you can go the other way (have the popup call back to a method on the opener/parent, but this forces me to maintain some way of looking up context (and I have to pass the key to the context to the popup in the query string). The current method lets me capture the context in a closure, making my popup a much more reusable piece of code.

I am not trying to do this cross domain - both the parent and popup are in the same domain, although the parent is an iframe (hard to test with jsfiddle).

Suggestions?

Answer 1

If you are doing this with an iframe try it this way

HTML

<button id="clickme">Click Me</button>

<iframe id="framer"></iframe>

​

Javascript

$(function() {
    $('#clickme').click(function() {
        $("#framer").attr("src","http://jsfiddle.net");
        $("#framer")[0].onload = function(){
            alert('loaded');
        };
    });
});​

I updated your jsfiddle http://jsfiddle.net/HNvn3/2/

EDIT Since the above is completely wrong this might point you in the right direction but it needs to be tried in the real environment to see if it works.

The global variable frames should be set and if you

window.open("http://jsfiddle.net","child_window");

frames["child_window"] might refer to the other window

I got javascript access errors when trying it in jsfiddle - so this might be the right track

EDIT2

Trying out on my local dev box I was able to make this work

var w = window.open("http://localhost");
w.window.onload = function(){
    alert("here");
};

the alert() happened in the parent window