February 28, 2021
Hot Topics:

Advanced JavaScript windowing -- part two: Kiosk popups

  • By Brent Lee Metcalfe
  • Send Email »
  • More Articles »

Web development tides are changing. It's not difficult to imagine kiosk popup windows riding the crest of a new wave of autonomous Web sites—sites with little or no reliance on browsers for navigation or core functionality, such as printing or searching. In effect, standalone Web sites.

By "kiosk popup" I mean a popup window that is fully functional irrespective of whether the main browser window remains open. In part one of this article we looked at how self-closing popups can improve site usability. In this installment, we'll consider how JavaScript popups can operate independently of a browser's toolbars to enhance user interactivity.

Note: Unless otherwise indicated, the code in this article has been tested and works on 4.x (32-bit) versions of Netscape Communicator and Microsoft Internet Explorer. (IE users may encounter slight graphical display problems.)

As an example of a kiosk-mode Web site, we will focus on a prototype that I developed three years ago for Novell's product documentation. The prototype—codenamed "HyperDoc 1.0" (but affectionately referred to as "GameBoy"; you'll see why below)—was designed to give users greater control in manipulating a Web-based windowed environment. I've revved 1.0 to 1.5 for this article to accommodate both Communicator and IE users, since 1.0 was coded for Netscape Navigator 3.x only.

True, IE 4.x's window

method is broken—I'm on the record lamenting as much—but it's not absent. Web builders generally have not taken advantage of instances in which the IE 4.x window
method works. HyperDoc 1.5 illustrates such instances.

To better understand HyperDoc's window control features, follow the mini-test suite below.

1. Launch HyperDoc 1.5!

2. In the Topic Console popup, scroll to "Topic 4" (don't click any links yet).

3. In the HyperDoc Console window (the one with the navigational gadgets at the bottom), click SUPPORT to open the Novell tech support web site in a new window.

4. In the Novell Support Connection window, scroll to the bottom.

(It may seem like I'm dictating a bunch of menial tasks; please be patient, this rainbow has Web developers' proverbial pot 'o gold at its end.)

5. Click in the HyperDoc Console (avoid its navigational buttons) to bring it to the top.

First, let's review the features that work in both IE and Communicator.

6. In the HyperDoc Console, click TOPIC.

This code places the Topic Console on top without reloading the

file; you can still see "Topic 4" on the screen.

The function to automatically open the Topic Console resides between the

tags in the frameset
file of the HyperDoc Console.

var devi8 = null;

function engage1() {
devi8 = open('topic.htm', 'TOC', 'resizable, scrollbars, top=0, left=0, height=100, width=320');


The function to focus the Topic Console resides in the

file of frame
and accesses the window variable (
) through the parent (top) frameset.

function reEngage() {
if (top.devi8.blur) top.devi8.focus();

7. In the Topic Console, click "Topic 4."

When "Topic 4" loads the HyperDoc Console automatically receives focus. This is done by placing

in the
tag of "Topic 4."

Note: Read procedures 8 through 10 before executing them.

8. In the HyperDoc Console, click MAIN to bring the primary browser window to the top.

9. Close the primary browser window.

10. In the HyperDoc Console, click MAIN to (re)open the primary browser window.

Looks like magic, but it isn't. From this point on, IE and Communicator functionally part company. (IE users will still want to play along, though.) The code invoked by MAIN does a few different things.

var whoAmI = navigator.appName;

var bigKahuna = null;

function testBigKahuna() {
if (top.opener.blur) top.opener.focus();
else {
if (bigKahuna != null && bigKahuna.blur && whoAmI == "Netscape") bigKahuna.focus();
else {
bigKahuna = open("081398_jswin2.html#kahuna", "MainConsole", "toolbar, status, menubar, directories, location, resizable, scrollbars, height=440, width=640");

In Communicator, function

first determines whether the
(the primary browser window) is blurred (i.e., open). If so, the
is brought to the top. If not, the function tests whether variable
has a value (i.e., whether
is an open window), is blurred, and whether the browser's name is
If these conditions exist, window
is focused. If these conditions don't exist, a new window (
) is launched.

In IE, focusing the

works as it does in Communicator. If, however, the
is closed,
bypasses testing whether window
is open and launches
. So if
is already open, it reloads. In IE 4.x, it's not possible for one link to both open or focus the same window.


doesn't actually reopen the
, instead it opens a new window with the
file loaded.

11. In the HyperDoc Console, click SUPPORT.

Communicator brings the Novell Support Connection popup to the top without reloading it. IE reloads the window in the background (just as we saw with window


The code for focusing or opening the support window resides in frame


var whoAmI = navigator.appName;


var secondSite = null;

function scryer(url) {
if (secondSite != null && secondSite.blur && whoAmI == "Netscape") secondSite.focus();
else {
secondSite = open(url, "w3Link", "scrollbars, top=20, left=20, height=280, width=620");

Now for the coup de grâce.

12. In the HyperDoc Console, click the close arrow graphic.

Both Communicator and IE close all three open HypderDoc windows. The code for doing this is discussed in part one of this article. Advanced JavaScript windowing -- part one: Self-closing popups For those who need a refresher, the code below—which resides in frame

—closes the support popup:

function disEngage() {
if (secondSite != null && secondSite.open) secondSite.close();

This next code—which resides in the HyperDoc Console frameset

file—closes the Topic Console:

function disEngage() {
if (devi8 != null && devi8.open) devi8.close();

For those less familiar with the placement of function definitions and invocations (or if I've been too abstruse), here are links to the HyperDoc 1.5 source files that contain JavaScript windowing code:

As JavaScript (and the IE permutation JScript) continues to evolve, developers will discover more resourceful ways to implement robust multi-window Web sites. This two-part article has only scratched the surface of possibilities. Well-architected windowed UIs let users rapidly access information and escape the time-sucking entanglement of convoluted Web design.

Brent Lee Metcalfe is a corporate information architect for Novell Inc. Among other things, he designed and engineered the Web-based documentation user interface for several Novell® products, including Novell BorderManager™, Z.E.N.works™, and forthcoming NetWare® 5.0. Brent has published in c|net's builder.com, and he runs im@go w3 design in his spare time (whatever that is!). He can be pestered here or there. Portions Copyright © 1998 Novell Inc. All rights reserved. Used with permission.

This article was originally published on August 13, 1998

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date