Parent/Child Windows References

[MIGSoft]

Hey All.

Have a question. I have this situation: in JavaScript I have a parent window that opens a child window using window.open(). Now, through the course of the whole thing, comes a point where the child refereshes the parent window using opener.location.reload(). After the reload happens, I have realized that the parent window no longer has references to its child windows. I need the newly reloaded parent window to still somehow have a references to the child windows so it could manipulate them.

Any ideas would be great. An example would be fantastic.

Thanks.

[alpha_foobar]

I think your problem is the reload, when this happens the window probably loses all relationship references (I'm guessing). If the parent refreshes, it makes sense that your code no longer controls the child. With this in mind it seems logical that the opposite is also true.

I imagine you have two options:
1. Use a frame in the child window so the child doesn't reload, only its contents (this may or may not be helpful?).
2. Use a variable or function in the child window to register the parent (this assumes that a link still exists from parent to child, even though the link is broken from child to parent).

Cheers.

[digital-ether]

Hey All.

Have a question. I have this situation: in JavaScript I have a parent window that opens a child window using window.open(). Now, through the course of the whole thing, comes a point where the child refereshes the parent window using opener.location.reload(). After the reload happens, I have realized that the parent window no longer has references to its child windows. I need the newly reloaded parent window to still somehow have a references to the child windows so it could manipulate them.

Any ideas would be great. An example would be fantastic.

Thanks.

Hi MIGSoft,

The problem you have come across is a major one that exists in different situations in web development. It traces back to the HTTP protocol. However, thats a discussion in its own.

The reason the reference to the window does not exist any more is because the object in your parent window, that references the child window, is deleted when you refresh the parent window. So the object reference to the child window does not exist any more...

Now it would have been easy for the browser to keep the reference if it needed to, but since the web is "stateless", then any new refresh of a page is treated as a new document, unrelated to the old one.

Now one solution would be to never refresh your parent window. Instead you can use frames or iframe. Your parent frame can be used to open child windows, the child windows then refresh a frame within the parent window, so as not to refresh the parent.
The frame can not have borders, and take up 100% of the screen, to it doesnt look like you have frames.
This is the way gmail.com does it.. :) They also use it to keep javascript in the parent window, that they dont want refreshed.

If you are familiar with Ajax (XMLHTTPRequest), you can use a combination of frames and Ajax, or use Ajax by itself. However, for most regular sites, that would be too much work.

If you really want to refresh your parent window, then heres a few solutions. You can probably find more solutions searching "JavaScript Object Persistance". In this case, across new browser pages.

1) Using Cookies:
If you dont have too many child windows opened by the parent, you can use cookies. Cookies however have limited space to be saved in on the clients browser, so you may run out of space with lots of saving.

What you need to do it serialize (convert to string) the javascript object that you want saved for the refresh, in this case the child windows.
(search the web for Javascript serialize)
Then save the serialized object string to a cookie on the clients computer.
Then when the window is refreshed, retrieve the cookie, and unserialize. Then build the object back into the DOM.
A good example of this is :

http://developer.apple.com/internet/webcontent/iframe.html

See the bit of code:

} catch(exception) {
      // This is for IE5 PC, which does not allow dynamic creation
      // and manipulation of an iframe object. Instead, we'll fake
      // it up by creating our own objects.
      iframeHTML='\<iframe id="RSIFrame" style="';
      iframeHTML+='border:0px;';
      iframeHTML+='width:0px;';
      iframeHTML+='height:0px;';
      iframeHTML+='"><\/iframe>';
      document.body.innerHTML+=iframeHTML;
      IFrameObj = new Object();
      IFrameObj.document = new Object();
      IFrameObj.document.location = new Object();
      IFrameObj.document.location.iframe = document.getElementById('RSIFrame');
      IFrameObj.document.location.replace = function(location) {
        this.iframe.src = location;
      }
    }

You can use this as a template to build child window objects into existance in the parent window if you cant do it with regular DOM methods. (Note: the above is building an iframe object into a parent window)

Once you have your objects in place, you're done. They should point to the child windows in existance. (I havent tested, so i may be wrong).

2) Using JSON

JavaScript Object Notation, JSON, is serializing JS Objects for transfer over HTTP. (Its become a defacto protocol for serializing JS).

YOu can use one of the JSON Libs available to serialize and un-serialize JS Objects, and even upload the Object into your server if there isnt any space on the clients computer (cookies).

With this method you will still have to build the Objects back into the DOM as in the method above.

3) Using PDOM

Persistant Object Document Model (PDOM).
This is a name I've come up with for the method I've created for making JavaScript Objects Persistant across browser pages/refreshes.
I have yet to pulish this publically but if you are interested, you can view it at http://fijiwebdesign.com/ when it is published in a few days.

It should be the simplest method as it lets you specify which Objects you want to persist, such as your child windows, and they will be there even when the page refreshes, for as long as the browser window is open! :)

[MIGSoft]

Hey Guys,

Thanks for your help. Yeah, I decided to rethink my design so it would not require the refreshing of the window. Makes things easier. Once the child finishes its thing, it refreshes the parent and then closes.

This web application is going to be running on the thin web server. It it not sophisticated enough in terms of resources, and peformance to support Ajax. Thin webserver runs a a real time OS. The html files are not even stored. What you have to do is write C-code that tells the server how to construct the html page you want on the fly.

Once again thanks for your comments.

[noppid]

I just did an app with the iframe method suggested. It works great. The iframe window can update the database on the server and the clients parent page with only iframe refreshes via JS and it's transparent. This does file uploads, so I had to post the form.

I also did another page with a posting form that does not refresh(post), but adds a table element to the existing open page if the db update is sucessful.

Here are the links I referenced.

http://www.captain.at/howto-ajax-form-post-request.php

http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

Pay close attention to the selection of the parent elements and getting the handle of those parent objects in order to update the proper objects.

[jpeeters]

3) Using PDOM

Persistant Object Document Model (PDOM).
This is a name I've come up with for the method I've created for making JavaScript Objects Persistant across browser pages/refreshes.
I have yet to pulish this publically but if you are interested, you can view it at http://fijiwebdesign.com/ when it is published in a few days.

This sounds great. Is the library available somewhere?

Hi,

I have the same problem, and I can't achieve to serialize my popup reference.

I tried with JSON and a lot of different libraries :

var popupVar = window.open('url', 'name');
var serializedString = JSON.encode(popupVar);
var serializedString = popupVar.toJSONString();
...

Every time I have errors. I could catch it with IE, and it says : [Object error]. Great :p
In Firefox it just crashs it...

I did'nt find any real example on serializing JS "native" objects, only JS "created" objects (like var Person = { this.id; this.name; })

Does someone achieve it ? Know how to serialize this popupVar ?

Thanks a lot

Nobody ? :(

[~s.o.s~]

What would you achieve by serializing a window handle which is valid only as long as the window exists?

The popup will still exist. It is just the parent window which is refreshed. So I want to store the popup reference "myRef" (var myRef = window.open(...)) before the unload of the parent window, and deserialize it when the window has finished refreshing, to have the control of the same popup (still opened).

[sprash]

Hi,

I have the same problem, and I can't achieve to serialize my popup reference.

I tried with JSON and a lot of different libraries :

var popupVar = window.open('url', 'name');
var serializedString = JSON.encode(popupVar);
var serializedString = popupVar.toJSONString();
...

Every time I have errors. I could catch it with IE, and it says : [Object error]. Great :p
In Firefox it just crashs it...

I did'nt find any real example on serializing JS "native" objects, only JS "created" objects (like var Person = { this.id; this.name; })

Does someone achieve it ? Know how to serialize this popupVar ?

Thanks a lot

Hi,
I have the exact same java script issue where even if my parent window reloads, it should still be able to hold the child window references. Did you manage to get a solution for that. Any help would be appreciated.
Thanks in Advance.

[~s.o.s~]

> even if my parent window reloads, it should still be able to hold the child window
> references.

AFAIK, you simply can't. To put it in simple terms, the Javascript variables disappear after a page reload. After all Javascript is a client side technology.

A work around would be to store all the information you need to maintain inside a cookie i.e. whether the child window was open or not and if yes then what were it's contents; at the same time being aware of the 4KB limit imposed on the cookie size.

[digital-ether]

> even if my parent window reloads, it should still be able to hold the child window
> references.

AFAIK, you simply can't. To put it in simple terms, the Javascript variables disappear after a page reload. After all Javascript is a client side technology.

A work around would be to store all the information you need to maintain inside a cookie i.e. whether the child window was open or not and if yes then what were it's contents; at the same time being aware of the 4KB limit imposed on the cookie size.

You can't store a popup window reference in a cookie as it is directly dependent on the current parent window/document which is a javascript host object.
However, if you could persist the current window to the next reload in the browser, you could also persist reference to open windows, and other objects (dependents).

Unfortunately I cannot release the code for this right now, as I would like to, as we have a patent pending. I will try and get this code out in ASAP as I know this is needed in many areas of web development, especially the web2.0.

As soon as we get the patent sorted you will be able to persist references to host objects in javascript between the loading of new windows.

At the moment I am interested in any other methods that may have been discovered to do this, though I have not found any so far.

-- update:

I'll add some code to demonstrate persistence of javascript native and host objects after I get it tested in a majority of browsers and OS's.

[~s.o.s~]

You can't store a popup window reference in a cookie as it is directly dependent on the current parent window/document which is a javascript host object.
However, if you could persist the current window to the next reload in the browser, you could also persist reference to open windows, and other objects (dependents).

Read my post carefully; I talk of persisting the child window 'information' and not the child window itself which seems to make little sense.

You could store information like the child windows' attributes like its height, width, position etc. in a cookie. On a document load, your javascript function would then check the contents of the cookies and then re-create a child window based on the flag 'recreateNeeded' which would be either true or false or 0 or 1 (the way you want it to be). Of course this means persisting the child window information at regular intervals and writing a custom mini parser which would parse the contents of the cookie at load time but yes, it's very much possible with a bit of effort .

[amitnishad]

The simplest way I found is to use the fact that when your child window is named and you try to open a new pop up with the same name it automatically refers to already opened window. Here's the way to do it.

window.open('test.html','WindowName','',''....);// open the child window for first time
WindowRef = window.open('','WindowName','',''....);// it assigns the reference for the same child window to the variable
Note that url parameter is left blank and Pop up window name is the same. It refers to the same child window and assigns the reference object to variable "WindowRef".

The best part of the above code is that you can take the reference of the window regardless of the parent page refreshing.'

Now when you need to refer the child window simply do it by
WindowRef.close();  // close the child window

[ankurg11]

Thanks a lot for your reply......:)