Dynamically Change Another Opened Window

Dynamically Change Another Opened Window

I am having trouble creating a site where customers can click something in a parent window and have a picture appear in another child window. I then want customers to be able to click something else in the parent window and have another picture show up in the same child window as before (the customer can keep clicking). I want to use DHTML for the sake of simplicity and also because I do not want the child window to have to refresh itself every time the customer clicks something new. What would be a simple solution to this problem? I have read up on the “window” object (the top of the object hierarchy) but it seems that in DHTML, an event can only affect a tag in the same windows that the event is in. I would appreciate any advice you can give.

This problem is actually pretty simple to solve, although you need to understand a little bit about the document object model. Whenever you create a window (or a frame, which is essentially an embedded window) you are actually creating a programmatic object that happens, not coincidentally, to control the contents of what’s displayed on the screen. The object that’s exposed in DHTML is a window object, and it forms the very top of the hierarchy in Dynamic HTML.

The following JavaScript code can be used to open up a new window:

The variable wnd now contains an instance of the window with the contents of the HTML file myNewDoc.htm. This wnd object is what you need in order to control the window. Once you have the wnd instantiated, you can then retrieve the document associated with it:

var doc=window.document;

Then you can use Dynamic HTML to replace the contents of that doc with anything that you want:


This example will cause the indicated image to appear in the window. You can even go one step further and encapsulate that call into a generic function:

function showImage(wnd,imageName){   if (""+wnd=="undefined"){"","wnd","");       }   var doc=wnd.document;   doc.body.innerHTML="";   }

Then you can initialize a window variable and display the image in one fell swoop:

var wndshowImage(wnd,"image1.jpg");

There is one caveat about using Dynamic HTML with windows. For security reasons, the only windows for which you can grab documents or related handlers are those from your own site. This way you can't point a Web page at another Web site and read all of its code.


Share the Post: