JavaScript Tip of the Week for January 6, 1997: The Universal Remote | WebReference

JavaScript Tip of the Week for January 6, 1997: The Universal Remote

JavaScript Tip of the Weekfor January 6, 1997: The Universal Remote

The universal remote is a great invention, and now it's on the Web. It's a real improvement on the original remote, and it's much easier to use. So why is it called "universal"? There are actually a couple of reasons.

Lauching The Remote

To create a universal remote, you should begin by making a function to launch it. Put this function in the page that you want to launch the remote from.
    function makeRemote() {
    remote = window.open("","remotewin","width=350,height=400");
    remote.location.href = "http://webreference.com/javascript/970106/remote.html";
        if (remote.opener == null) remote.opener = window; 
    remote.opener.name = "opener";
    }
This code uses the opener's name property, which is accessible in HTML, to name the opener "opener" (sounds redundant, it isn't though). Because it names the opener through the name property, you can now use TARGET to redirect links and forms to the opener -- just as you do with frames. For example, a link in the remote, "remote.html", can now be redirected to the opener by simply putting a target inside the link. No additional functions are needed.
    <A TARGET = "opener" HREF = "index.html">
Naming the opener "opener" is just an HTML trick, don't get it confused with the JavaScript opener property that is used in most remotes. The opener property is a totally different animal, as was discussed in an earlier tip, and is only accessible through JavaScript.
A Search Is Just A Search

Something that you see in many remotes is a search feature. Adding a search feature, or almost any type of form, can be done quickly with the universal remote. Though you can preform a search (in a remote) by parsing together parts of the search "dialog" with a keyword, the method you will learn is easier and more adaptable. It works like this: instead of targeting the search to the current window, which is the remote itself, target the search to the opener window. Sounds pretty obvious, doesn't it. Other than that, the remote version of the search form can be identical to the original version.

Begin by placing your form in the remote as you would in any other scenario. There is only one thing that needs to be changed: the form's target. Since the opener is named "opener", make the form's target "opener". For this example, Webreference's search form is used.

    <FORM ACTION="/cgi-bin/AT-webrefsearch.cgi" TARGET = "opener" METHOD="POST">
    <INPUT NAME="search" size="37"><BR>
    <INPUT TYPE="submit" NAME="Search" VALUE="Search">
    by <INPUT TYPE="radio" NAME="mode" VALUE="concept" CHECKED>
    concept or <INPUT TYPE="radio" NAME="mode" VALUE="simple">
    keywords <INPUT TYPE="hidden" NAME="sp" VALUE="sp">
The form will now function in the remote as it does in any other page. The difference is that the results of the form (in this example the search results) will be displayed in the opener, not the remote. The great thing about this method is that it can be used easily with a wide range of forms, not just for searches. As a general rule, if a form uses POST or GET to retrieve its results you can assume that it will work with this remote by changing the TARGET of the form. If the form is JavaScript powered, like the select menu, you must go the traditional route and change it's references to windows (window.location becomes opener.location).

Finally, to launch the remote, you can use a link anywhere in the page:

    <A HREF = "javascript:makeRemote()"&gtStart Remote</A&gt
or put the onLoad event handler in the BODY tag to display it automatically.
    <BODY onLoad = "makeRemote()"&gt

Source