Works in: Internet Explorer 4+ only

There was a time, not too long ago, when you could not buy a television that had a remote control. These days, television remote controls are conveniences people use every day. Similar to the way a TV's remote control can change channels from across the room, you can remotely control multiple browser windows from client-side script running within a "master" instance of your browser.

Most Windows applications do not perform all of their work within a single window, but rather will open different windows to provide different features. Why should your Web application be bound to performing all of its work within a single instance of your browser? You can use JavaScript from within an instance of your browser window to remotely control other instances of your browser. You can open and close another browser window, dynamically change the content of the other browser window, display alert boxes over the other browser window, and much more. You can accomplish all these tricks through JavaScript code that is running in an "original" or "parent" page.

The sample page contains a number of options that allow you to open a new window, determine how that window will look when it is opened, and change the contents of the new window after it is opened. The client script in this page makes use of certain objects that are available in Internet Explorer but are not available in Netscape Navigator. As such, pages with similar code would be best suited to controlled intranet environments where the standard browser is Internet Explorer 4.0 or higher.

The key to the remote control scenario is procuring a reference to the other window that you want to control. One of the easiest ways to get this reference is to use the 'open' method of the 'window' object. The 'open' method will return a reference to the newly opened window. You simply store that reference in a variable and use it to control the window to which it is associated.

This code stores the reference to the newly created window in a variable named 'popUp'. You will use this variable to control the window.

popUp = window.open(openThisPage, windowName, windowAttributes);

Notice that the 'open' method takes three input parameters. The first parameter is the HTML page to open up in the new window. For simplicity, this example opens up the same sample HTML page in the new window. However, you could open any HTML page from any place to which your computer has a connection, such as on your own computer, on your corporate intranet, even from across the Internet.

The second parameter to the 'open' method represents the window name. This parameter is an identifying string that is associated with a particular window. You can set this parameter to virtually any value you please. Although this string is an identifier for a window, it is not a true reference that can be used to control that window. For that, you need the return value from the 'open' method.

The third parameter represents many options that you can use to control how the window will appear when it opens. Remember that popUp holds the reference to the new window and is the key to the remote control magic. You assign values to the three parameters through three variables: openThisPage, windowName, and windowAttributes.

var openThisPage = 'remotecon.htm';
var windowName = 'MyWindow';

var windowAttributes ;
windowAttributes  = 'top=' + MyForm.windowTop.value + ', ';
windowAttributes += 'left='+ MyForm.windowLeft.value + ', ';
windowAttributes += 'width=' + MyForm.windowWidth.value + ', ';
windowAttributes += 'height='+ MyForm.windowHeight.value + ', ';

if (MyForm.showScrollbars.checked==true)
{
	showIt = 'yes';	
}
else
{
	showIt = 'no';	
}
windowAttributes += 'scrollbars='+ showIt  + ', ';	

if (MyForm.showToolbar.checked==true)
{
	showIt = 'yes';	
}
else
{
	showIt = 'no';	
}
windowAttributes += 'toolbar='+ showIt  + ', ';	

if (MyForm.showMenubar.checked==true)
{
	showIt = 'yes';	
}
else
{
	showIt = 'no';	
}

windowAttributes += 'menubar='+ showIt;

The first two parameters are pretty straightforward, holding the name of the page to open and the name that will be assigned to the newly opened window. The third parameter is a long string of options and their values, separated by commas. Although it may be difficult to visualize from the previous code, the resulting string that gets passed as the third parameter to the 'open' method looks something like this:

top=100, left=100, width=300, height=300, scrollbars=yes, toolbar=no, menubar=yes

The newly opened window will be hidden if any portion of another window is clicked and covers it. The newly opened window cannot easily be made to "stay on top" but that is not to say that it cannot be done. It can be accomplished through the use of such technologies as signed scripts and ActiveX controls. However, those topics are beyond the scope of this short article and will not be covered.

In addition to simply opening the new window, you can control the new window through the reference that has been returned from the 'open' method. For example, you can close the window using this code:

popUp.close();

You can also remotely write anything you want to into the browser window at run time. You can even write HTML into the new window, complete with all supported tags, and scripting features.

popUp.document.writeln('WriteThisToTheNewWindow');

Hopefully, you are beginning to see that the reference that you obtained from the 'open' method is a reference to the 'window' object for the newly opened window. This means that the 'window' object's methods and properties are available for that window, and you can manipulate every one of them. You have full remote control to the newly opened window.

Another example is changing the background color of the newly opened window. Remember that all of this code is running in the originally opened browser and is manipulating a separate and distinct browser window. This code will change the background color of the newly opened window to red.

popUp.document.bgColor='Red';

In addition, you can dynamically change the title to the browser window. This trick would be helpful in an application where you want a single instance of the browser window to display several different types of content at various points in time. You may want to change not only the content of the browser window, but also the title that is shown at the top of the browser window. This strategy can be effective at increasing the apparent speed of your application.

popUp.document.title = 'My New Title';

As you can see, it is easy to open and control other browser windows from client-side script running within a "parent" instance of your browser. Your application is no longer bound to performing all of its work within a single window. This level of control enables you to create Web applications that can display other information and provide features that are different from the parent. Using this strategy, your Web applications can behave more like traditional Windows applications. Try this solution in your own Web applications and make your users happy.