Saturday, September 19, 2009
This Window Has No Title
Blog Entry #157
If you've been following along, you know now that a browser window can be subdivided into
(a) a viewport part holding the document content, and
(b) a chrome part comprising the window's bars and borders.
HTML and CSS allow us fine-grained, down-to-the-pixel control of the document content area. Control over the browser chrome is another story, however, at least at the simple level of coding that I discuss on this blog. If you wanted to, say, resize, reshape, reposition, or add some color to the individual chrome bars, neither HTML, CSS, nor JavaScript provides tools for doing so as of this writing. At best, we are able to show and hide some of the chrome bars via the browser's View menu, and that's about it.
JavaScript 1.2 implemented six chrome bar properties/child objects of the window object: locationbar, menubar, personalbar, scrollbars, statusbar, and toolbar; these properties are 'Netscape-specific', i.e., they were never picked up by Microsoft. As objects, the chrome bars have a single, Boolean property, visible, that in theory can turn the bars on and off when set to true and false, respectively. Of the OS X browsers on my computer, Firefox and Safari support the chrome bar properties/objects (MSIE and Opera return undefined for them), and will read but not write their visible property for both primary and secondary browser windows.
(Firefox will write the visible property with the aid of some Java, but this is a can of worms we're not going to open, at least not right now.)
As we've seen in some of the "Opening New Windows With JavaScript" scripts discussed in recent entries, the strWindowFeatures parameter of the window.open( ) method can in theory equip secondary windows with the aforelisted chrome bars via the following features: location, menubar, directories, scrollbars, status, and toolbar, respectively; however, the actual effects of these features vary somewhat from browser to browser (and at least for menubar, from platform to platform). Moreover, Microsoft and Mozilla, the 'big two' browser vendors, now allow authors less control over secondary window chrome than they used to; for example, we saw in the pop features subsection of Blog Entry #152 that Firefox gives a window.open( )-opened window an address bar and a status bar even if location and status are specifically set to no in the strWindowFeatures string.
A browser window's title bar would also seem to be part of the window chrome even though the title in that bar is a property of the window's document and not of the window itself. Both Microsoft and Mozilla list a strWindowFeatures titlebar feature that in theory can remove a secondary window's title bar when set to no. But in practice, for security reasons, neither Microsoft nor Mozilla wants you to be able to get rid of the title bar or even push it off-screen; in the "Internet Explorer Window Restrictions" section of an "Enhanced Browsing Security" article, Microsoft elaborates:
The visible security features of Internet Explorer windows provide information to the user to help them ascertain the source of the Web page and the security of the communication that uses that page. When these elements are hidden from view, the user might think they are on a more trusted page or interacting with a system process when they are actually interfacing with a malicious host. Malicious use of window relocation can present false information to the user, obscure important information, or otherwise “spoof” important elements of the user interface in an attempt to motivate the user to take unsafe actions or to divulge sensitive information.In other words - you may have to crank up your imagination a bit, as I had to when I first read this - losing a window's title bar is part of the 'toolbox of deception' that the bad guys use to compromise a user's computing environment. (Hmmm...makes you wonder about some of the people who write in to Joe asking for scripts...)
Furthermore, Microsoft's description of the titlebar feature on its current window.open( ) page is not exactly a ringing endorsement thereof:
titlebar = { yes | no | 1 | 0 }
Specifies whether to display a Title Bar for the window. The default is yes.
Internet Explorer 5.5 and later. This feature is no longer supported. The Title Bar remains visible unless the fullscreen sFeature is active.
This parameter is ignored prior to Internet Explorer 5.5. It applies only if the calling application is an HTML Application or a trusted dialog box.
We'll have more to say about the titlebar feature later, but for now let us note that the MSDN titlebar entry namechecks the window.open( ) fullscreen feature -
The Title Bar remains visible unless the fullscreen sFeature is active- which was discussed in the previous entry. Microsoft's description of the fullscreen feature reads:
fullscreen = { yes | no | 1 | 0 }This brings us to our script du jour, namely, the script offered by HTML Goodies' "New Window: No Title Bar" tutorial, which attempts to use the fullscreen feature to create a new window without a title bar. The "New Window: No Title Bar" script is reproduced below:
Specifies whether to display the browser in full-screen mode. The default is no. Use full-screen mode carefully. Because this mode hides the browser's title bar and menus, you should always provide a button or other visual clue to help the user close the window. ALT+F4 closes the new window.
Internet Explorer 7. A window in full-screen mode does not need to be in theatre mode.
Prior to Internet Explorer 7 a window in full-screen mode must also be in theater mode (channelmode).
<script type="text/javascript">
function goNewWin( ) {
/* The new window's final height and width: */
var NewWinHeight = 200;
var NewWinWidth = 200;
/* Positional offsets for the new window relative to the screen's upper-left-hand corner
: */
var NewWinPutX = 10;
var NewWinPutY = 10;
/* In the following command, the strWindowFeatures string must be all on one line, but a line break can follow either the strUrl or strWindowName parameter. */
TheNewWin = window.open("untitled.html", "TheNewpop",
"fullscreen=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no");
TheNewWin.resizeTo(NewWinHeight, NewWinWidth);
TheNewWin.moveTo(NewWinPutX, NewWinPutY); }
</script>The "New Window: No Title Bar" script is quite straightforward - in brief, here's what's supposed to happen:
(1) By setting fullscreen to yes and the various chrome bar features to no, the script's window.open( ) command pops up a full-screen and almost completely chromeless window, i.e., the new window will have borders but the rest of the chrome, including the title bar, should be gone.
(2) The script uses the resizeTo( ) method of the window object to shrink the full-screen window to a 200px-by-200px window, which is then slightly offset from (10 pixels to the right, 10 pixels below) the monitor screen's upper-left-hand corner via the moveTo( ) method of the window object - we previously discussed the resizeTo( ) and moveTo( ) methods in Blog Entry #119.
In the previous post, I stated that iCab 3.0.5 is the only browser on my computer that supports the fullscreen feature. More specifically, iCab 3.0.5 supports fullscreen's full-screen effect but not its no-title-bar effect. Running the "New Window: No Title Bar" demo when using iCab 3.0.5 in the SheepShaver environment produces the window below:
I didn't expect the demo to give a new window lacking a title bar with the other browsers on my computer, and it doesn't.
I don't know how fullscreen shakes out on the Windows platform. (Loyal Mac user that I am, for a while now I've thought of getting a cheap PC purely for the purpose of testing code - perhaps I should do that one of these days.) At the bottom of the "New Window: No Title Bar" page are four comments by readers, at least three of whom tested the tutorial demo with MSIE 7 and are thus necessarily PC users. One of these commenters, jameex, unpromisingly reports,
[Y]eah me too running on ie7 title bar still appears.The other two IE 7 commenters say that they're getting a menu bar but make no mention of the title bar.
Not so surprisingly, Microsoft itself pours cold water on the use of fullscreen to ditch a new window's title bar. As referenced in the Note on fullscreen appearing on Mozilla's window.open( ) page, the "Script sizing of Internet Explorer windows" subsection of the aforelinked "Internet Explorer Window Restrictions" MSDN resource declares:
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.So maybe the "New Window: No Title Bar" script did work as advertised once upon a time, but don't get your hopes up if you're using a modern browser.
At this point, I think we've said what we need to say about the fullscreen feature. But let's get back to the titlebar feature. Microsoft's titlebar definition is given above; we'll flesh out Mozilla's take on titlebar in the next post.
reptile7
- posted by A. Peak @ 3:03 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)