Javascript can open a browser window of any size, with or without a toolbar, button bar, scrollbars, and so on. However, since all major web browsers now offer popup advertising filters, you must be very careful to do this only in response to a specific user action. Otherwise, the web browser will probably ignore your code or, at best, display a small "popup requested" icon that the user will probably not pay attention to.
Also, be aware that users still sometimes disable Javascript entirely, and that companies sometimes do so throughout the entire organization as a matter of corporate policy. It is essential to have a good "fallback" link that operates if the user's browser does not execute your Javascript.
Fortunately it is not difficult to address all of these issues correctly. Here is a complete example that is compatible with pop-up advertising blockers and behaves well with or without Javascript in both Internet Explorer and Mozilla/Netscape:
<!-- In the head section of the page -->
<script>
<!--
function wopen(url, w, h)
{
// Fudge factors for window decoration space.
// In my tests these work well on all platforms & browsers.
w += 32;
h += 96;
var win = window.open(url,
'popup',
'width=' + w + ', height=' + h + ', ' +
'location=no, menubar=no, ' +
'status=no, toolbar=no, scrollbars=no, resizable=no');
win.resizeTo(w, h);
win.focus();
}
// -->
</script>
When it comes time to actually open such a window, just write a link like the following: < a href="page.html" target="popup"
onClick="wopen('page.html', 640, 480); return false;" >
In this example, the window opens with sufficient interior space to accommodate a layout 640 pixels wide and 480 pixels tall. You can easily change the size by changing the width and height parameters to wopen, above. The page that opens is page.html which, of course, you can also change, but be careful to change both the href attribute and the first argument to wopen.
If Javascript is disabled in the user's browser, the window still opens, although the size cannot be set. Also, in both scenarios, the name of the window is set to popup in this example. You may set any name you wish in the script or make it a parameter; if you use the same name in several links of this kind, any later clicks on such links will reuse the same window rather than popping up a new window. When this happens, the win.focus() call takes care of making sure the window still comes to the foreground, something that is frequently forgotten in such scripts.
If you are using XHTML 1.1 Strict, be aware that the target attribute is no longer accepted. If you must be XHTML 1.1 Strict compliant, you should remove the target attribute. A new window will still be opened when Javascript is available; otherwise the link will be followed normally in the same window, and your design should cope gracefully with this possibility.
For a complete list of the options that can be passed to window.open to control the behavior of the new window, see this article on javascript.about.com. The reference table on that page is excellent, although I do not recommend following their suggestions regarding timed popup advertising, as most browsers will ignore it and the remaining users will be irritated more than the advertising is worth. Control over new windows is best used to achieve design goals that improve the user's experience of your site.
Search the Knowledgebase
Browse by Category
Print this page
Email this page
Post a comment