Sunday, June 28, 2009
Opening New Browser Windows at Elevated pH
Blog Entry #149
In our last episode, we discussed HTML Goodies' "Quick Window" script, which pops up a fenster window
upon mousing over Joe's Open the message window onMouseOver link if the user's browser is not set to block pop-up windows. We significantly noted that click events can in most cases override pop-up window blocking and that we should consequently use an onclick event handler to call the msgopen( ) function that opens the fenster window.
As you can see, there's not much to the fenster window/document, and therefore I thought we might wrap up our look at the "Quick Window" script by 'upgrading' fenster in a way that makes use of the base element in the fenster document head. Towards this end, I came up with the idea of converting fenster into a navigational device for the various "Opening New Windows With JavaScript" tutorials, something like this:
The base element
Like the document.open( )/document.close( ) methods and the with statement, the base element is another "Quick Window" first for us - who knew that we would break all of this new ground in such a simple script? Covered at the end of the "Links" chapter in the HTML 4.01 Specification, the HTML base element specifies a "base" URL for the "resolution" of relative URLs - i.e., for the conversion of relative URLs to full URLs - in a document. (At least this is the base element's main purpose - as noted below, the base element can also be used to specify a common target for a document's links.) The base element necessarily appears in the document head and is an empty element. In the HTML 4.01 Strict DTD, the base element has a single attribute, a #REQUIRED href attribute whose value is the base URL. In the HTML 4.01 Transitional DTD, the base element has two attributes, href and target, which are both #IMPLIED; the target attribute of the base element serves the same function as does that for the anchor element.
To refresh your memory, here is the fenster document's base element and also the anchor element to which it presumably applies:
<base target='Frame 0' /> ...
/* Frame0 is the name of the display - change it if necessary */
...
<a href='http://www.htmlgoodies.com/'>http://www.htmlgoodies.com</a>It's not clear from the script if the author is targeting the http://www.htmlgoodies.com link to the opener window or to another new window. Both Frame 0 and Frame0 are valid values for the name property of the window object - we'll go with the former for the following discussion. (Yes, window names can contain space characters, at least for the time being. However, I see that the data type designation for the name attribute of the frame element switches from CDATA (whitespace is OK) to NMTOKEN (whitespace is not OK) in going from HTML to XHTML.)
Frame 0
is the name of the display? I don't know what this means. Frame 0 would be the name of the opener window if the opener document's source included a
window.name = "Frame 0"; or self.name = "Frame 0"; script command, which it doesn't. Otherwise, Frame 0 would be the name of a newly opened third window (or a new tab, depending on the browser) into which http://www.htmlgoodies.com/ would be loaded upon clicking the http://www.htmlgoodies.com link in accord with 'precedence #4' of the "Target semantics" section of the HTML 4.01 Specification, and this is what actually happens with Joe's demo. You can verify that Frame 0 is the name of the new window by typing javascript:window.alert(window.name); into the browser's address bar and then hitting the return/enter key. We could just as easily put the target='Frame 0' attribute in the anchor element start-tag and then ditch the base element. But for a larger document with a bunch of links that load their href resources into a common window, putting the target information in a single base element is definitely a good idea.
Tutorial navigation
The "Quick Window" script's base element doesn't have a href attribute, and that's where we and our tutorial navigation device come in. Let's first list the full URLs for the "Opening New Windows With JavaScript" tutorials:
(1) "New Window: No Title Bar": http://www.htmlgoodies.com/beyond/javascript/article.php/3471181
(2) "Quick Window": http://www.htmlgoodies.com/beyond/javascript/article.php/3471271
(3) "Remote Image": http://www.htmlgoodies.com/beyond/javascript/article.php/3471311
(4) "Hello Goodbye": http://www.htmlgoodies.com/beyond/javascript/article.php/3470941
(5) "So, You Want A Pop-Under Window, Huh?": http://www.htmlgoodies.com/beyond/javascript/article.php/3471241
(6) "The Same Size": http://www.htmlgoodies.com/beyond/javascript/article.php/3471321
(7) "Remote Control JavaScript": http://www.htmlgoodies.com/beyond/javascript/article.php/3471281
All of the above URLs are of the form http://www.htmlgoodies.com/beyond/javascript/article.php/#######, and consequently we will use their common http://www.htmlgoodies.com/beyond/javascript/article.php/ scheme://hostname/path/ for a base href value:
<base href='http://www.htmlgoodies.com/beyond/javascript/article.php/' />We can now use the seven-digit endings of the full URLs as relative URLs in writing links to the tutorials, e.g.:
<a href='3471181'>New Window: No Title Bar</a>
<a href='3471311'>Remote Image</a> <!-- etc. -->Next issue: where shall we target the tutorial links, to the opener window or to a new window? If you want the opener document - the "Quick Window" tutorial in this case - to still be on hand (and I would want it to be on hand), then you'll want to open the links in a new window. To do this, we pick an unused name for the new window - I don't care for Frame 0 or Frame0, so how 'bout spot? - and assign it to the target attribute of the base element:
<base href='http://www.htmlgoodies.com/beyond/javascript/article.php/' target='spot' />We should be good to go at this point, right? In practice, I ran into a tar pit of inconsistent browser behavior in piecing everything together. Here's what I observe on my computer:
(1) The gold goes to Firefox, which allows me to target the tutorial links either to a new window, a new tab, or the opener window per my preference without incident. Another plus: Firefox keeps the focus with the navigation window, where it belongs.
(2) Opera and Safari will open the tutorial links in a new window but not in a new tab. Safari consistently puts the focus with the new window; however, focus is readily transferred to the navigation window by equipping each link with an
onclick='window.setTimeout(\"window.focus( )\", 500);' attribute. Strangely, Opera insists on putting the focus with the new window upon following a first link but then regularly puts the focus with the navigation window upon following subsequent links. Targeting the links to the opener window is somewhat problematic for both of these browsers, which will reliably open a first link in the opener window but then open subsequent links in one or more new windows. (The aforementioned javascript:window.alert(window.name); test shows that these windows and the opener window all have the same name - this isn't supposed to happen!)(3) Internet Explorer - more specifically MSIE 5.2.3 for Mac OS X, not exactly the cutting edge vis-à-vis MSIE development - does not offer tab-browsing. MSIE will open the tutorial links in a new window with the same size as the 650px-by-225px navigation window, which might be OK for a small-screen computer but is distinctly annoying on a large screen - in contrast, the corresponding Firefox, Opera, and Safari new windows have the same size as the opener window. MSIE puts the focus with the new window; targeting the links to the opener window, which is trouble-free with MSIE, similarly puts the focus with the opener window; in both cases, focus can be transferred to the navigation window with
onclick='window.setTimeout(\"window.focus( )\", 500);' link attributes as for Safari. Finally, I find that MSIE acts on the target attribute but not the href attribute of a write("<base href='http://www.htmlgoodies.com/beyond/javascript/article.php/' target='spot' />");command; it is necessary to code a 'normal' non-script base element in the opener document head for MSIE to recognize the base URL. (Alternatively, the openee document can be placed in a separate file so that it doesn't have to be written with a script.)
Time to try it all out:
Welcome to the "Quick Window" Demo Opener Div.
Click here to open the "Opening New Windows With JavaScript" navigation device.If you have turned off JavaScript support for your browser or if your browser does not support JavaScript, then clicking the demo link will reload the current page.
In the following entry, we'll take up "Remote Image", the next "Opening New Windows With JavaScript" tutorial.
reptile7
- posted by A. Peak @ 3:39 PM
Comments:
<< Home
There's certainly a lot to know about this issue. I like all the points you've
made.
Look into my web page - Jawa Interview Questions
Post a Comment
made.
Look into my web page - Jawa Interview Questions
# posted by 
: 11:46 PM
: 11:46 PM<< Home
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)