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.
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:
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://3.bp.blogspot.com/-pO9mHpHaa8Q/Vy-BF2ilTrI/AAAAAAAAAjw/AJTPNGfxrLsB6z1tSNWU4b7jBUkrtnfggCLcB/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:
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.
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:
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.
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.:
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
(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:
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.
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.