Question

When i open a popup, i want to be able to set few callbacks that the popup can call.
So basically i’d have two pages with code like this:

*****popup.html*******
var callBack;
function OnSaveClick()
{
  if (callBack)
     callBack();
}

**********************************************
********popupOpener.html*************
function callBackHandler()
{
   //some code here
}
function OpenPopup()
{
   var p = window.open("popup.html");
   p.callBack = callBackHandler;
   return false;
}

The problem with this is that var callBack gets reset when the DOM of popup.html loads and it doesn’t load until OpenPopup() on the opener completes.
So the next best thing would be to set the callBack in the ready event of popup.html. But i want to be able to attach an event handler to the ready event of popup.html in popupOpener.html.
So the OpenPopup function would now look something like this:

var p;
function OpenPopup()
{
  p = window.open("popup.html");
  $(p).ready(hookCallBack)      //doesn't work
  //or $(p.document).ready(hookCallBack)  //doesn't work
  return false;
}
function hookCallBack()
{
  p.callBack = callBackHandler;
}

But hookCallBack() executes immediately after $(p).ready(hookCallBack) and NOT when the DOM of popup.html is ready. Is there any other way to do this?

Answer 1

See my question: Get DOM elements of a popup for jQuery manipulation for an answer of how to control the popup after it is loaded

So you can do something like @MattBall’s answer:

popupOpener.html:

var opener = {

        popup: null, 

        newPopup: function(windowsname){
            this.popup = window.open(windowsname);
            var self = this;

            this.popup.onload = function ()
            {
              var doc = this.document,
                  script = doc.createElement('script');
                  script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js';
                  script.onload = function ()
                  {
                      function setup()
                      {
                          //something to do on the popup
                      }

                      script = doc.createElement('script');
                      script.textContent = "(" + setup.toString() + ")();";
                      doc.body.appendChild(script);
                  };

                  doc.head.appendChild(script);
            };
        },

        some_function: function(){
             //calling it here:
             this.newPopup('popup.html');
        }
    }

So to load the popup on page load:

window.onload = function(){
    opener.some_function();
};

Here is a demo: http://jsfiddle.net/EJasA/