Best way to propagate opener variable across page navigation?

Question

Application that I'm working on has multiple modules. Two are of a concern - main module and module that I write. And I have to call a function on window that contains main module and the problem is that I have to call that function not from page that is opened by parent webmodule, but from page to which user navigates from this page.

Basically first page presents just some query forms, lets user to make some query, and second holds query results, and I am supposed to update contents of parent page based on these results.

Navigation goes like that

• Main module
• First page of my module (i have main module page as an window.opener variable.
• Second page of my module (and I would like to be able to open this page in the same browser window that the first one is opened)

And I would like to have as free navigation as possible - like opening query results in new tab, going back changing query parameters, making new query, etc. I would also like to present user query forms on page that displays results and let them to refine this query, and still be able to update main module.

I was thinking of following solutions:

1. Using AJAX to load query results to first window, but I would like to have this app as simple as possible, and AJAX is not simple ;)
2. Spawning new window on every request and doing code like var mainModule = opener.mainModule. Which is evil.
3. Embedding query results in a frame or iframe, but I havn'e got the slightest idea on how to inject main module window javascript variable into frame or iframe.

Answer 1

iirc, even after you navigate away from the original document in a window opened by window.open, window.opener is still available.

Answer 2

If being able to navigate in tabs is a requirement, I think you'd have to nix the idea of using a JavaScript opened window system. Because the opener property is definitely lost in Firefox, Safari, and most browsers, when you navigate to a different window. A new tab disturbs the neat sandbox.

Not being a requirement, per your comment, I think you can use either of 3 methods:

• Parent-Child window communication-- which I will take up next;
• XMLHTTP Requests (a.k.a. AJAX); or
• iFrames (the old way to remote to the server :)

I'll take the Parent child communication angle, here, since you seem to be most comfortable with it.

1. Inter-navigation in a "Child" window is easy.
   • any link on the page loads in the child and shares the same "opener".
   • the parent can reload a different page and it shares the same opener.
2. There will be a parent-listener function in the child;
3. The child will have a separate f**unction to talk** to the parent.
4. The parent will have one or more child listeners, depending on how generic, or specific your needs.

I've updated (not completely) an article I wrote years ago, to let you play around with the windows and to actually do a minimal form submission. The communication alerts are rather verbose; but you will have no doubt as to who is communicating what to whom. The first child is annoyingly opened onload. But there is a link on the page to change the child to a server-generated form.

JavaScript: Beyond Parent Child Windows

---

EXAMPLE CODE SNIPPETS:

A Link:

<a href="page1.html" id="newwinlink">open a window from link</a>

Link Listener:

The event listener and target property are set up in the head of the document, in JavaScript that executes onload:

var mywin; //global variable for best results

//XDOM - normalizes browser differences:
var openingLink = XDOM.getElementById('newwinlink');
openingLink.target = "newWin"; //important!

XDOM.addListener(openingLink, 'click', function(e){mywin=window.open('','newWin','width=400,height=400,resizable,scrollbars');if (!mywin.opener){mywin.opener = self;}return true}, false);

Child Document - Parent Listener:

function parentListener(pmsg) 
{
    alert("I'm the child, and I just received the following message from my parent:\n\n" + pmsg); 
}

Child Document - Talk to Parent:

function talktoParent() 
{
    if (self.opener!=null) {
        opener.childListener("Hi from child window!");
    } else {
        alert("no opener... sorry, can't talk now");
    }
}

Parent Document - Child Listener:

function childListener(cmsg) 
{
    alert("I'm the parent. Just received the following message from my child:\n\n" + cmsg);
    //send back a message to the child, mywin...
    mywin.parentListener("Hi, back, from parent window!");
}

These are simplistic. But you can see opener continuity, navigation, and communication between server-side postbacks and the Parent at the link provided above.

Again the downside is that opening any of these in another tab will lose the connection to the parent. Try it over on the page that I sent you to. I believe the child is set to alert you that it is disconnected from its "opener".

Feel free to ask questions, jb.