Wednesday, July 29, 2009
This Window Will Self-Destruct in Three Seconds
Blog Entry #152
In the two HTML Goodies "Opening New Windows with JavaScript" tutorials we've looked at so far, new windows are opened and closed via user events. The "Quick Window" tutorial uses a mouseover event to pop up a new window, whereas the "Remote Image" tutorial uses a click event to do so. The "Quick Window" script enables its window to be closed by a blur event, whereas the "Remote Image" script provides its window with a button that when clicked closes the window (if you close these windows in a 'normal' way, i.e., by clicking the close button in the window's title bar, by choosing the Close (Window/Tab) command under the File menu, or by typing Command-W or Control-W, these actions would still constitute user events, of course).
Today we move on to the "Hello Goodbye" tutorial, whose script pops up a small window with a greeting and two(-to-three) other lines of text
(this window's document background color is probably not what you will see at the "Hello Goodbye" page - vide infra)and then closes that window three seconds later without any user input at all. The "Hello Goodbye" script is reproduced in the div below:
<script type="text/javascript">
config = 'toolbar=no,location=no,directories=no,status=no,menubar=no,width=200,height=150';
config += 'scrollbars=no,resizable=no';
pop = window.open("", "pop", config);
pop.document.write('<script type="text/javascript">');
pop.document.write('setTimeout(');
pop.document.write('"self.close( )');
pop.document.write(';",3000)');
pop.document.write('</');
pop.document.write('script>');
pop.document.write('<body bgcolor="ltgreen">');
pop.document.write('<center><b><h2>Welcome</h2></b></center>');
pop.document.write('<center><b><h3>Please Wait... While This Page Loads</h3></b></center>');
pop.document.write('<center><b><h6>This Window Will Close Itself...</h6></b></center>');
pop.document.write('</body>');
</script>As for the "Quick Window" and "Remote Image" scripts, Joe provides no discussion for the "Hello Goodbye" script, whose analysis is left to us and is given below.
Deconstruction
Opening the window
Unlike the "Quick Window" and "Remote Image" windows, the "Hello Goodbye" window is opened by a 'global' (outside of a function) window.open( ) command:
pop = window.open("", "pop", config);The window's object reference will be pop and its name value will also be pop - to use "pop" as an identifier twice in this way strikes me as bad form, but it doesn't cause the script any problems.
Prior to the window.open( ) command are two statements that preassemble the command's strWindowFeatures parameter value, which is variabilized as config (hmmm...maybe this is where Joe got the config= that appears in the Primer #11 script):
config = 'toolbar=no,location=no,directories=no,status=no,menubar=no,width=200,height=150';
config += 'scrollbars=no,resizable=no';The first of these lines sets the width and height of the window's viewport to 200 pixels and 150 pixels, respectively. The config lines also set seven other new window features to no, which is unnecessary, because
[i]f you define the strWindowFeatures parameter, then the features that are not listed or requested in the string will be disabled or removed (except titlebar and close*, which are by default [set to] yes),quoting Mozilla. Consequently, the window-opening code can easily be written as a single line:
var pop = window.open("", "pop2", "width=200,height=150");I can confirm that the preceding command's effect is equivalent to that of the corresponding "Hello Goodbye" code for all of the OS X browsers on my computer; however, this doesn't mean that all of the non-size window features are in fact turned off, as we'll see later.
*The close feature - which relates to the browser window's close button and the File menu's Close command, and which is detailed in the "Features requiring privileges" subsection of Mozilla's window.open( ) page** - is not supported by Internet Explorer.
**Unfortunately, Mozilla does not code individual
<a name="featureName">featureName</a> anchors for the various window.open( ) features (as Netscape did in the JavaScript 1.3 Client-Side Reference - check the source here), so follow the above quoting Mozilla link and then scroll down or use your browser's Find facility to get to the close feature.Closing the window
The remainder of the "Hello Goodbye" script comprises a set of eleven pop.document.write( ) commands that writes the document contained by the pop window. The first six of these commands build a script element itself holding a single command: a setTimeout( ) command that closes the pop window after a 3000-millisecond delay.
pop.document.write('<script type="text/javascript">');
pop.document.write('setTimeout(');
pop.document.write('"self.close( )');
pop.document.write(';",3000)');
pop.document.write('</');
pop.document.write('script>');The setTimeout( ) script element is all we have for the pop document head - a title element, a required child of a document's head element, is not present.
I can see why the script element end-tag is split into </ and script> parts: as explained in the "Differences in JavaScript-generating HTML" subsection of Mozilla's "Migrate apps from Internet Explorer to Mozilla" article, this is another way of escaping the </ character sequence in a document.write( ) argument and thus preventing the browser from prematurely terminating the enclosing script (in this case, the "Hello Goodbye" script as a whole). However, I have no clue at all as to why the setTimeout( ) command is spread over three script lines. Anyway, if the above code strikes you as being unnecessarily complicated, you would be right - it can be effectively replaced by the following command:
window.setTimeout("pop.close( );", 3000);Lightgreen is the colour
The next script line writes the pop document's body element start-tag:
pop.document.write('<body bgcolor="ltgreen">');Above and beyond the fact that the bgcolor attribute has been deprecated for all of the elements that can/could take it, ltgreen is not a recognized color name - Joe should know and have caught this, having put together a "So, You Want A Basic Color Code, Huh?" resource for the HTML Goodies site. As you can imagine, the ltgreen value has an unpredictable effect on the actual background color of the pop document body - I'll show you how it plays out on my computer in the "In practice..." section below.
The "Basic Color Code" page does list a lightgreen color name with a corresponding #90ee90 hex code value; lightgreen is not one of the W3C's core colors, but if both Netscape/Mozilla and Microsoft give the lightgreen name a thumbs up - it appears in the "Color Values" appendix of the JavaScript 1.3 Client-Side Reference and in Microsoft's "Dynamic Color Reference" - then that's good enough for me. The background color of the document in the window in the screen shot at the beginning of the post is in fact set to lightgreen - we'll see more lightgreen backgrounds in due course.
popText
The "Hello Goodbye" script concludes with three commands that respectively write the text strings that appear in the pop window (plus a final line that closes the pop document's body element):
pop.document.write('<center><b><h2>Welcome</h2></b></center>');
pop.document.write('<center><b><h3>Please Wait... While This Page Loads</h3></b></center>');
pop.document.write('<center><b><h6>This Window Will Close Itself...</h6></b></center>');
pop.document.write('</body>'); /* As the body element end-tag is optional, this line can be commented out if desired. */Each string is marked up as an h# element whose immediate parent is a b element. In a non-script HTML context, placing an h# element in a b element violates the content model of the b element, which can only have inline element children. Moreover, I've never come across a browser that didn't bold the h# elements by default, so I wouldn't have put those b elements in there in the first place.
Semantically, are the pop text strings really headings? The Welcome string is a heading of sorts but the other two strings definitely aren't. It would be more appropriate to mark the strings up as p elements and then vary their font sizes by setting their CSS font-size properties to x-large, large, and x-small, respectively. The p elements can be collectively bolded by a
p { font-weight: bold; } style rule. Each string is also centered with a center element; yes, one center element start-tag (prior to the Welcome string) and one center element end-tag (following the This Window Will Close Itself... string) would have sufficed here. Better yet would be to replace the center elements with a text-align:center; style that can be applied to either the body element or the aforementioned p elements.
pop.document.write('<title>Hello Goodbye<\/title>');
pop.document.write('<style type="text/css">');
pop.document.write('body { background-color: lightgreen; }');
pop.document.write('p { font-weight: bold; text-align: center; }');
pop.document.write('#p0 { font-size: x-large; }');
pop.document.write('#p1 { font-size: large; }');
pop.document.write('#p2 { font-size: x-small; }');
pop.document.write('<\/style>');
pop.document.write('<body>');
pop.document.write('<p id="p0">Welcome<\/p>');
pop.document.write('<p id="p1">Please Wait... While This Page Loads<\/p>');
pop.document.write('<p id="p2">This Window Will Close Itself...<\/p>');
pop.document.write('<\/body>');In practice...
ltgreen
When the bgcolor attribute of the pop document's body element is set to ltgreen, the actual background color in the pop window, as determined by the DigitalColor Meter utility, is #00ee00 when using Safari, #0000ee when using MSIE or Opera, and #000e00 when using Firefox - your guess is as good as mine as to where these color values come from:
Safari:
MSIE or Opera: 
Firefox: 
As indicated above, this situation can be cleared up by changing ltgreen to lightgreen; of course, you are free to choose some other shade of green or another color altogether for the pop document background.
pop features
If for whatever reason you would prefer that the Please Wait... While This Page Loads string not wrap, then increasing the pop width from 200 pixels to 325 pixels will do the trick.
Regarding the non-size features that are ostensibly set to no by the window.open( ) command (excluding menubar, which is not part of the window chrome on a Macintosh), I find that only MSIE actually disables all of them. Opera and Safari enable the resizable feature
(note the resizing 'grippy' in the lower-right-hand corner)and disable the rest of them. Firefox enables the location, status, and resizable features:
In Firefox's case, the location, status, and resizable features respectively map onto, and are overridden by, dom.disable_window_open_feature.location, dom.disable_window_open_feature.status, and dom.disable_window_open_feature.resizable browser preferences that are turned on by being set to true - according to Mozilla, this is done for accessibility and/or security reasons - these preferences can be accessed and switched to false in order to disable the corresponding window features via the Firefox about:config pane:
Demos
Like his "Quick Window" demo, Joe's "Hello Goodbye" demo, which would normally spring into action upon accessing the "Hello Goodbye" page, will not work for you if your browser is set to block pop-up windows. I recognize that pop-up blocking did not come about in order to kill
a great little welcome to those who stop by your sitethat Joe wanted to create - it's a shame the marketers had to ruin things for the rest of us, isn't it?
I should finally mention that at the end of Blog Entry #26 we very briefly discussed the "Hello Goodbye" script and provided a self-closing window demo triggered by clicking a button - let's reprise the demo here, why not?
I hope to be able to cover the next two "Opening New Windows with JavaScript" tutorials, "So, You Want A Pop-Under Window, Huh?" and "The Same Size", in the following entry.
reptile7
- posted by A. Peak @ 3:34 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)