Wednesday, December 28, 2005
Opening New Windows, Part 1
Blog Entry #25
You may know that opening an HTML link in a new browser window is a simple matter of putting target="resource window" in the anchor tag, e.g.:
Click <a href="http://www.yahoo.com" target="resource window">here</a> to open the Yahoo! portal in a new window.
Click here to open the Yahoo! portal in a new window.
HTML Goodies usefully provides a tutorial on this very topic here. Alternately, Blogger.com notes in its "How can I do more with links" Help topic that target="_blank" can also be used in the anchor tag for this purpose. HTML Goodies' JavaScript Primers #11 and #12, which we'll go over in the next few posts, discuss the JavaScript version of this process enabled by the open( ) method of the window object. As we'll see, JavaScript allows considerably more control over the opening of new windows than do the target="resource window" and target="_blank" methods cited above.
Moreover, HTML Goodies' Beyond HTML : JavaScript section sports an "Opening New Windows With JavaScript" collection of tutorials. I am hesitant to recommend these tutorials, because several of the scripts therein are either 'problematic' (read: on my computer, they don't work as advertised), or are, IMO, pointlessly complicated. However, I'll try to address most of the issues they raise in either this or the next blog entry.
The window.open( ) command: loading a file (or not) into a newly opened window
A new browser window is straightforwardly opened with a window.open( ) command statement, which can be executed either by normal placement in a script (as is done in the Primer #11 Script) or by assignment to an appropriate event handler, e.g.:
Move your mouse over <span style="color:red;" onmouseover="window.open( );">these words</span> to open a new window.
Move your mouse over these words to open a new window.
The code above opens a new, blank window with the same width and height as the preexisting window that holds the document containing the code. Positionwise, the new window is on top of the preexisting window and is 'currently active,' i.e., the new window has 'focus,' whereas the preexisting window is now 'blurred'; also, the new window is slightly offset (lower and to the right or left) from the preexisting window. The features of the new window are browser-dependent: with Netscape, the new window has all of the 'bars' - a title bar (reading "Netscape"), an address bar, a status bar, etc. - of the preexisting window, but with MSIE, all you get is a title bar (reading "about:blank").
But blank windows aren't very exciting, are they? We can load another document into the new window by putting a first, URL-specifying parameter in the instance of the open( ) method, e.g.:
Move your mouse over <span style="color:green;" onmouseover="window.open('http://www.google.com');">these words</span> to open the Google home page in a new window.
Move your mouse over these words to open the Google home page in a new window.
Commands that return URLs are also suitable open( ) parameters; the script below:
<script type="text/javascript">
window.open(window.location);
</script>
will (re-)open the current document in a new window.
We are not limited to HTML-type documents in this regard; for example, an image can also be loaded into a new window:
Move your mouse over these words to open a new window containing a photo of Alli, the sleeping kitty.
Move your mouse over <span style="color:blue;" onmouseover="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWOFeqLGHKBZe7mCXmm2Vg8abbb-3Jay1_4W7FUAfqd46m-MbIqeTI16Ah2V1AsY5IfRKfq-hh0UN9nhy_wh-FZt4e9_qAvAnLfBACGb6n4lVVbgVHz8xWhkTP2OFDruNhMj8Bw/s1600/Alli.jpg');">these words</span> to open a new window containing a photo of Alli, the sleeping kitty.
Now, if all you want to do is open and display a file in a normal-sized window, then you're done - the window.open("http://www.some_web_page.com") syntax is all you need. However, two additional open( ) parameters will allow us (a) to configure a newly opened window, specifically, to set its width/height and to add/subtract its various components, and (b) to 'communicate' between the new and preexisting windows. Let's look at these parameters, shall we?
Naming a new (or preexisting) window
The URL in the open( ) instance can be followed by a second parameter that is earmarked for assigning a name to the new window:
window.open("http://www.some_web_page.com", "new_window_name");
More precisely, the second open( ) parameter sets the value of the name property of a newly created window object. The "new_window_name" text string cannot be used to reference the new window in the manner of the "self," "parent," and "top" properties of the window object; rather, as we'll see later, "new_window_name" is used to target 'output' to the new window from the preexisting window or from other, subsequently opened new windows.
While I'm on this topic, I should mention that we can name the preexisting window for targeting purposes with a simple
window.name = "whatever";*
command statement placed normally in a script.
(*Perhaps I shouldn't say "whatever" - like JavaScript variables, window names cannot contain whitespace nor nonalphanumeric (!, @, #, etc.) characters.)
Configuring a new window
The name in the open( ) instance can be followed by a third parameter that configures the new window:
window.open("http://www.some_web_page.com", "new_window_name", "new_window_features");
In using the third open( ) parameter, the name parameter is not optional, but can be 'left blank,' as follows:
window.open("http://www.some_web_page.com", "", "new_window_features");
With respect to the preceding command, on my computer...
(1) Leaving out the empty quotes of the name parameter:
window.open("http://www.some_web_page.com", "new_window_features");
generates a "Type mismatch" error (classified by Microsoft here as a syntax error but (this resource is no longer available, and may have been relevant to a different technology) by my computer as a runtime error) when using MSIE; with Netscape, the new window still opens, but the "new_window_features" parameter is ignored.
(2) Putting whitespace between the empty quotes of the name parameter:
window.open("http://www.some_web_page.com", " ", "new_window_features");
also generates a "Type mismatch" error when using MSIE; in this case, Netscape executes the command without incident.
Looking at various Web sites, I count a total of 32 configurable features, many of them Netscape-specific* and some of them deprecated, associated with the third open( ) parameter. (*Recall from Blog Entry #18 that many window object properties are Netscape-specific.) Kudos to Gérard Talbot, who lists and details browser support for all but one of these features here (he's missing the MSIE-specific channelmode feature, which is discussed here by JavaScript Kit). HTML Goodies, for its part, covers in Primer #11 the following nine new window features, all of which are supported by both MSIE and Netscape:
width, height, toolbar, menubar, scrollbars, resizable, location, directories, status
Some comments on these features:
(1) We can easily set the width and height, in pixels, of a newly opened window, e.g.:
"width=700, height=200"
Paralleling the use of width and height attributes in an <img> tag, the "700" and "200" values above do not need to be followed by the "px" unit identifier. My attempts to set the dimensions of a new window with other units - I specifically tried width/height lengths in points (pt), centimeters (cm), inches (in), and percentages (%), which are all OK for use with the CSS positioning width and height properties - were unsuccessful.
(2) The other seven features are Boolean: setting them to "yes", or "1", or simply listing them will (depending on the user's platform) 'turn them on.' I find that I can also enable these features by setting them to "true" when using MSIE but not Netscape.
At its window.open( ) page, DevGuru notes: "[I]f you don't supply any of the feature arguments, all features with a choice of yes or no are enabled"; on my computer, this is true when using Netscape, but not MSIE, which does not enable features that are not listed, this being consistent with my above observations on the browser-dependent features of newly opened blank windows. DevGuru continues: "[I]f you do specify any feature parameters...all [unspecified] others are no" - this is true for both browsers.
(3) When the toolbar feature is activated, MSIE installs a Button Bar;
with Netscape, this subset
of the Navigation Toolbar
is visualized.
(4) In the "Parts of a Window" section of Blog Entry #18, I remarked, "[O]n my iMac, the browser menubar is not part of the window but is separate therefrom, and setting window.menubar.visible=false has no effect"; conversely, I find that I cannot add a new menubar to a new window via the menubar feature above.
(5) Turning on the scrollbars feature gives a right scrollbar IF the vertical length of the document in the new window exceeds that of the new window (there's no scrollbar if the entire document can be seen in the window). On the other hand, if the horizontal length of the new window's document exceeds that of the new window, then a listed scrollbars feature does not install a bottom scrollbar; rather, the document content is scrunched to the left so that it fits in the new window.
(6) When the location feature is activated, MSIE installs an Address Bar;
with Netscape, this part
of the Navigation Toolbar is visualized.
(7) When using Netscape, turning on the directories feature renders the Personal Toolbar;
relatedly, Mr. Talbot's site notes that there is a Netscape-specific personalbar feature that does the same thing. However, QuirksMode.org reveals at its "Popups" page that the directories feature is not supported by MSIE 5.2 for the Macintosh; sure enough, I find with MSIE that a listed directories feature does not add a Favorites Bar (below the Address Bar)
or any other bar to a new window, but has no effect.
I don't need to go over the resizable (allows window resizing) and status (gives a status bar) features, do I? Didn't think so.
Time to put it all together - Joe gives us the following syntax, taken from his answer to the Primer #11 Assignment, for the third open( ) parameter:
config='height=100,width=400,toolbar=no,menubar=yes,scrollbars=no,resizable=no,location=no,directories=yes,status=no'
The "config=" part at the beginning is unnecessary, and I have no idea where it comes from...it doesn't appear in any of Netscape's JavaScript reference material (not even in JavaScript 1.0, the first version of the language), DevGuru doesn't use it, JavaScript Kit doesn't use it, Microsoft's reference material doesn't mention it, Joe himself doesn't use it in the Primer #12 Script. Leave it out.
As shown above, the new window features are separated by commas; when I tried to delimit them with semicolons, à la successive style properties, the results were browser-dependent and also dependent on the feature sequence, and I'm not sure it's worth it to go into the details thereof, so let's just say stick with commas here.
Joe emphasizes a couple of times - the first time in red text, no less - that there shouldn't be any whitespace in the "new_window_features" string. However, I find that whitespace is allowable between successive features, but not within an individual feature, when using either MSIE or Netscape, e.g., "height=100, width=400" is OK, but "height = 100, width = 400" will be ignored by the browser.
From a practical standpoint, then, the window.open( ) command in Joe's assignment answer could be steamlined as:
window.open ('opened2.html', 'newwin', 'height=100, width=400, menubar, directories')
(Yes, I know that Joe asks the reader to use "every one of those features" in the assignment - better to enable them all, IMO.)
There are two other new window features that are supported by both MSIE and Netscape: left and top, which position respectively the left and top borders of the new window from the left and top boundaries of the monitor screen in the same way that the screenX/screenLeft and screenY/screenTop properties of the window object would apply to positioning the preexisting window. Like the width and height features, the left and top features are specified in pixels, without units.
Finally, Joe informs us that a newly opened window necessarily has a title bar - "You get it, like it or not," he says, and he's largely but not completely correct. As noted by DevGuru and by Mr. Talbot, there is a Netscape-specific titlebar feature, and in its JavaScript 1.3 Client-Side Reference, Netscape reports, "To set the titlebar to no, set this feature in a signed script," which seems to me, after glancing over Netscape's documentation on signed scripts, way more trouble than it's worth just to get rid of the title bar.
As for MSIE, the "Opening New Windows With JavaScript" sector of HTML Goodies, linked at the outset of this post, features a "New Window: No Title Bar" tutorial with a script that Joe claims will open a new window without a title bar when using MSIE. The script's highlight is the MSIE-specific fullscreen feature (Joe wrongly insinuates that the fullscreen feature is supported by both MSIE and Netscape), which, in theory, gives when enabled a window that fills the entire monitor screen; however, Mr. Talbot links here to a Microsoft Windows XP site that states, "When creating a window, the definition of the fullscreen=yes specification is changed to mean 'show the window as maximized,' which will keep the title bar, address bar, and status bar visible." In the event, my own trial run with the fullscreen feature afforded a window with a title bar, but no other bars, and with the same width and height as the preexisting window (regardless of its size).
BTW, if for some reason you do want a new window to fill the user's screen, then this can be done more reliably with the following code:
window.open("http://www.some_web_page.com", "", "width=" + screen.width + ", height=" + screen.height);
in which the width and height properties of the screen object, representing the user's monitor screen, are returned and assigned respectively to the width and height new window features.
OK, these are the basics of opening new windows. However, we're not done yet with Primer #11; still on the board for discussion are methods for window-window communication, which we'll get to in the next entry.
reptile7
- posted by A. Peak @ 2:00 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)