Developer

Code window-aware behavior

You can set an HTML file to behave a certain way in one environment and differently in another. Here's how.

By Brent Lee Metcalfe

Wouldn't it be great if you could have an HTML file behave a certain way in one environment and differently in another? Well, you can.

In the frameset, aware0.html and aware1.html synchronize with the left frame and are displayed with a white background. Here's the code:

function preMpt() {
  if (self.name == 'contextee') {
    document.bgColor = '#ffffff';
    parent.preNup('aware1b.html');
  }
    else {
      document.bgColor = '#d2b48c';
      self.focus();
      window.onblur = function() {
        window.close();
      }
    }
}

<body … onLoad="preMpt()">

On the other hand, if either of the two HTML files are launched in a pop-up window, they focus themselves and are displayed with a white background. Also, when users click anywhere else on the desktop, the pop-up automatically closes.

Why do this? In short, reuse. Suppose you have an encyclopedic glossary for an e-journal. In a frameset, you might want to have a table of contents that changes its appearance when a given entry is selected. The selected entry, then, would open in the right frame and synchronize the left frame. In the e-journal, terms from the glossary would be links that open a pop-up window using the same definition—indeed, the same HTML—as the one used in the original glossary. Two different presentations, one file.

Note that in function preMpt() in the else statement I use an event handler as a window property:

window.onblur = function() {
  window.close();
}

This lets you tie a behavior (window.close()) to an event (onblur) within a function definition.

Brent Lee Metcalfe is a Web architecture consultant.

Editor's Picks

Free Newsletters, In your Inbox