Sunday, August 30, 2009
You Get My Prime Time
Blog Entry #155
(September 2016 Update: The first page of the current "Remote Control JavaScript" tutorial is marred - wrongly, HTML has been inserted into the underlying document's openindex( ) function, thereby killing the tutorial script and preventing the display of the OpenWindow window - so I'm going to give you links to archived versions of all three tutorial pages in the discussion below.)
We've addressed the subject of HTML Goodies' "Remote Control JavaScript" tutorial at least a couple of times previously - namely, a window.open( )-opened window's document can be used to load new resources into (or otherwise manipulate) an opener window and thus act as a "remote control" for an opener window. Nevertheless, it is still worth our while to review briefly the code presented by "Remote Control JavaScript" and comment on its execution in practice.
The "Remote Control JavaScript" tutorial is actually spread over three pages. When you visit the tutorial's first page and if your browser is not set to block pop-up windows, then the remote control window below pops up:
Clicking the new window's Section Two link loads the tutorial's second page into the opener window; clicking its Section Three link loads the tutorial's third page into the opener window. The "Section Two" page gives the following script for creating a remote control window:
<script type="text/javascript">
function openindex( )
{
OpenWindow = window.open("", "newwin", "height=300,width=150,toolbar=no,scrollbars=" + scroll + ",menubar=no");
OpenWindow.document.write("<title>R.C.</title>");
OpenWindow.document.write("<center>");
OpenWindow.document.write("<center><font size=+1>Remote<br />Control</font>");
OpenWindow.document.write("<a href='remote_control_2.html' target='main'>Section One</a><p>");
OpenWindow.document.write("<a href='remote_control_3.html' target='main'>Section Two</a><p>");
OpenWindow.document.write("</center>");
OpenWindow.document.close( );
self.name = "main";
}
</script>As specified on the "Section Three" page, the script's openindex( ) function is triggered by the loading of the tutorial's first page:
<body bgcolor="ffffff" onload="openindex( );">
<!-- Some browsers will not act on a hex-code color value that is not prefixed with a hash mark (#). -->The openindex( ) function kicks off with a window.open( ) command that pops up the remote control window and gives it the object reference OpenWindow. The command's strWindowFeatures string sets the width and height of the OpenWindow viewport to 150 pixels and 300 pixels, respectively. In addition, the strWindowFeatures string unnecessarily sets the toolbar and menubar chrome features to no (Mac users will still see a menu bar at the top of the screen) and it contains the strange scrollbars = scroll assignment that we saw in the "Remote Image" script and discussed in Blog Entry #150; the toolbar, scrollbars, and menubar features can all be subtracted from the strWindowFeatures string without incident.
The next six openindex( ) commands write the document contained by the OpenWindow window. The OpenWindow document head specifies an R.C. title for the OpenWindow title bar. The OpenWindow document body holds a Remote Control heading of sorts and, more importantly, Section One and Section Two hyperlinks that respectively target remote_control_2.html and remote_control_3.html documents to a window named main.
Following an unnecessary OpenWindow.document.close( ) command for closing the OpenWindow document, the last openindex( ) command 'completes the circle' by assigning the identifier main to the name property of the opener window, which is referenced using its self property.
In his introduction on the tutorial's first page, Joe says,
If you can rewrite this so it works on Explorer, I would be glad to post it here.In fact, the "Remote Control JavaScript" script doesn't contain any Netscape-specific code and it does work with MSIE 5.2.3 for Mac OS X on my computer.
In the "HTML Inside the Remote Control Box" section of the tutorial's second page, Joe states,
In addition you cannot have any quote marks in your HTML. Just don't use them. If you do - they will throw an error.I'll acknowledge that the formatting of nested quotes in JavaScript can sometimes be tricky, but this isn't the case here - indeed, in the above code Joe himself quotes the href and target attribute values for the anchor elements correctly, i.e., single quotes are placed within double quotes.
In the "Placing the Script" section of the tutorial's third page, Joe alleges,
Do not place the script within the body commands. It won't run there.Not true.
OpenWindow.document presentation and related practical matters
Near the beginning of the "Section Two" page, Joe says,
In order to get the two windows to play with each other, I had to make a point of [coding] them together to begin with. So I did.Actually, there's no reason why the OpenWindow document couldn't be moved to an external file; you'd have to maintain two files in that case instead of one, but on the plus side the openee document would be easier to read.
Whether the openee document is coded internally or externally, it's a good idea to get rid of its deprecated elements/attributes:
(1) The Remote Control string is marked up with a
<font size='+1'> ... </font> element, which maps onto and can be replaced by a font-size:larger; CSS declaration; however, my own preference is to recast the Remote Control string, which as noted above is a heading for all practical purposes, as an h3 element, which presentationally will bold the string and give it a block-level rendering.(2) The script seems to use two center elements to center the OpenWindow display: there's an outer center element lacking an end-tag* and a nested center element that does the actual centering. The nested center element can be replaced by a
<div style='text-align:center;'> ... </div> element; the outer center element start-tag should either be thrown out or, preferably, replaced with a body element start-tag.(*As for the div element, both the start-tag and the end-tag of the center element are required - see the center element declaration in the HTML 4.01 Transitional DTD.)
(3) If you like the aqua background in Joe's remote control window, which is imparted via a bgcolor='#00ffff' body element attribute not present in the "Section Two" script, then add a
<body style='background-color:aqua;'>tag to the openee document.
Two last presentational points:
• The Remote Control string is split between two lines via a br element, which can of course be removed if you see no need for this effect.
• For his demo window, Joe separated the various document body strings, including the You can move this by grabbing the blue bar with your mouse string, with p elements, but in the "Section Two" script he forgot to put a <p> tag between the Remote Control string and the Section One link. Semantically, the document links are not really 'paragraphs'; you might prefer to remove the <p> tags and instead use a display:block; style to give the links a block-level rendering.
Openee focus
Upon following the Section One/Two and Section Two/Three links, Firefox and Opera maintain focus with the remote control window, as is desirable, but Safari and MSIE transfer focus to the opener window, which is then brought to the screen foreground and consequently obscures the remote control window - this problem can be solved by equipping each anchor element start-tag with an
onclick='window.setTimeout(\"window.focus( );\", 100);' /* for an internally coded remote control, or */
onclick="window.setTimeout('window.focus( );', 100);" /* for an externally coded remote control */attribute, which will return focus to the remote control window and keep it on top of the opener window.
Strict validation and the target attribute
If the openee document is put in a separate file, then the anchor target attributes will prevent a strict validation of that document even after throwing out the font and center elements. The target attribute is one of three HTML attributes that are simultaneously (a) not deprecated but (b) excluded from the HTML 4.01 Strict DTD - the width and height attributes of the iframe element are the other two. Alternatively, strict validation of an external openee document is possible if the targeting to the main window is carried out JavaScriptically:
<script type="text/javascript">
for (i = 0; i < document.links.length; i++) document.links[i].target = "main";
</script>Just be sure to place or reference the above script statement after the anchor elements in the document body.
Other remote control possibilities
The use of anchor elements and the target attribute is perhaps the most basic way for a remote control window to load new files into an opener window, but it definitely isn't the only way. More generally, almost any set of renderable HTML elements - form controls, small images, non-anchor text strings, table cells, anything - can be combined with suitable event handlers that take the opener window to new 'locations' by assigning URLs to the location property of the opener window. For example, the openee document could contain a selection list whose options, when selected, change the opener document; try it out below:
<title>Remote Control JavaScript</title>
Welcome to the opener document.
The above demo was inspired by HTML Goodies' JavaScript Script Tip #40.
Six down and one more "Opening New Windows With JavaScript" tutorial to go: we'll cover "New Window: No Title Bar" in the following entry.
reptile7
- posted by A. Peak @ 2:48 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)