Developer

Synchronize multiwindow content

You can use JavaScript to open multiple HTML files at the same time. This allows you to synchronize multiwindow content. Here's how.

By Brent Lee Metcalfe

There are instances in which the contents of one window should be updated when the contents of another changes. You can use JavaScript to open multiple HTML files at the same time. Sounds good, but users are often vexed by the fact that a browser's Back and Forward buttons will change only one HTML file at a time, which throws the windows completely out of sync. This tip remedies that problem.

The function for synchronizing the windows resides in the frameset file (syncframe.html) of the larger window (syncUp):

function kinShip(url) {
  if (waah != null && waah.child.location.href != url) {
    waah.child.location.replace(url);
  }
}

Function kinShip() tests whether the smaller window (waah) is open and whether its frame child contains the correct synchronized file. If waah is open but frame child does not contain the synchronized file, the correct file is loaded using the replace() method. The replace() method opens a file without storing it in the browser's history list, making synchronization possible.

kinShip() is called from frame syncee in syncframe.html:

<body bgcolor="#000000" onLoad="parent.kinShip('sync0b.html')">

Observe that the synchronized file is passed as an argument to function kinShip().

I've defined a stringent relationship between the two windows; when either is closed, the other closes with it. This means that if the smaller window served for navigating and the larger for viewing, the viewing window would never be without the navigating window and vice versa.

You can also use similar code to synchronize multiple frames. I use such a technique in the next windowing example to sync up the right and left frames. This code resides in the frameset.html file:

function preNup(loc) {
  if (contexted.location.href != loc) {
  contexted.location.replace(loc);
  }
}

And this code invokes preNup() from the HTML file that opens in fame contextee, in this case loading aware0b.html into frame contexted:

function preMpt() {
  if (self.name == 'contextee') {
    document.bgColor = '#ffffff';
    parent.preNup('aware0b.html');
  }

<body … onLoad="preMpt()">

Or, you could call the synchronizing function (preNup()) directly in the onLoad event handler:

<body … onLoad="parent.preNup('aware0b.html')">

Brent Lee Metcalfe is a Web architecture consultant.

Editor's Picks

Free Newsletters, In your Inbox