Window Spawning and Remotes: Links and Forms in a Remote Window

Links and Forms in a Remote Window

Microsoft Shows Off Silverlight 4, IE9 Plans

Metasploit Expands Vulnerability Test Framework

Remotes are very useful because you can embed links and forms in the new window, which load in the original one. First, take a look at the following code, which launches a remote:

function launch(newURL, newName, newFeatures, orgName) {
  var remote = open(newURL, newName, newFeatures);
  if (remote.opener == null)
    remote.opener = window;
  remote.opener.name = orgName;
  return remote;
}

function launchRemote() {
  myRemote = launch("http://www.webreference.com/js/column7/demo.html",
                    "myRemote",
                     "height=350,width=110,alwaysLowered=0,alwaysRaised=0,
                       channelmode=0,dependent=0,directories=0,fullscreen=0,
                       hotkeys=1,location=0,menubar=0,resizable=0,scrollbars=0,
                       status=0,titlebar=1,toolbar=0,z-lock=0",
                    "myWindow");
}

launchRemote();

As you learned before, the launch() function's last argument specifies the name of the original window. This is the value to use in the TARGET attribute of the desired links and forms in the new window.

Here's the entire HTML code for demo.html:

<HTML>
<HEAD>
<TITLE>Remote Demonstration</TITLE>
<BASE TARGET="myWindow">
</HEAD>
<BODY BGCOLOR="#ffcc00">
<A HREF="/"><B>Webreference</B></A><P>
<A HREF="/experts/"><B>experts</B></A><br>
 <A HREF="/3d/">3-D Animation</A><br>
 <A HREF="/dlab/">design</A><br>
 <A HREF="/dhtml/">dynamic html</A><br>
 <A HREF="/outlook/">internet</A><br>
 <A HREF="/js/">javascript</A><p>
<A HREF="/index2.html"><B>contents</B></A><br>
 <A HREF="/headlines/">web news</A><br>
 <A HREF="/articles.html">articles</A><br>
 <A HREF="/dev/">how to</A><p>
<A HREF="/services/"><B>services</B></A><P>
<A HREF="/about.html"><B>about</B></A>
</BODY>
</HTML>

In this example we use <BASE TARGET="myWindow"> to set the default target. By doing that, we do not need to specify the target for each and every link and form on the page.

As explained in the first part of this column, a new window is created automatically if the opener window is not open. Click the following button and experiment with the universal remote:

It is also possible to create a window that always stays on top of other windows. Since the alwaysRaised features is only supported by Netscape Navigator 4.0+, you should use a workaround to achieve the same effect. First, you'll need to put the following event handler in the new window's HTML document:

<BODY onBlur="window.focus()">

This statement puts focus on the window when the user removes the focus. Here's a new version of the previous HTML document, which features a button that toggles the remote's state:

<HTML>
<HEAD>
<TITLE>Remote Demonstration</TITLE>
<BASE TARGET="myWindow">
<SCRIPT LANGUAGE="JavaScript">
<!--

var alwaysTop = true;
function toggleTop() {
  alwaysTop = !alwaysTop;
  if (alwaysTop) {
    window.onblur = window.select;
  } else {
    window.onblur = null;
  }
}

// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffcc00" onBlur="window.focus()">
<FORM>
<INPUT TYPE="button" VALUE="Toggle" onClick="toggleTop()">
</FORM>
<A HREF="/"><B>Webreference</B></A><P>
<A HREF="/experts/"><B>experts</B></A><br>
 <A HREF="/3d/">3-D Animation</A><br>
 <A HREF="/dlab/">design</A><br>
 <A HREF="/dhtml/">dynamic html</A><br>
 <A HREF="/outlook/">internet</A><br>
 <A HREF="/js/">javascript</A><p>
<A HREF="/index2.html"><B>contents</B></A><br>
 <A HREF="/headlines/">web news</A><br>
 <A HREF="/articles.html">articles</A><br>
 <A HREF="/dev/">how to</A><p>
<A HREF="/services/"><B>services</B></A><P>
<A HREF="/about.html"><B>about</B></A>
</BODY>
</HTML>