WWW FAQs: Which features of the browser window can I control from JavaScript, and when?

2007-01-16: Many designers of useful web applications (and, yes, non-useful things like popup ads) want to know how to control the browser window's behavior. As you probably know by now, JavaScript offers a window.open function that can open a browser window with specific features. Most of the browser window's features can theoretically be controlled here.

Over the years, however, the major web browsers have added security rules that limit what you can do with window.open. You can ask for the world— or rather, ask to take away the world— but the meek (i.e. your users) may inherit it after all.

Other browser behavior changes, such as disabling the "close" button of the browser or preventing the user from following a bookmark or typing in another URL, can also be influenced by the programmer. You can't force the user to stay, but you can force the display of a warning message and give the user the opportunity to change their mind.

So what options are really available? And when? I'll begin with the features that appear to be controlled by window.open (whether or not that actually works in modern browsers). Then I'll look at other features, such as preventing the user from closing the window, that are not managed by window.open.

If you don't already understand how to use window.open, first check out the articles how do I open a new window of a certain size, how do I center a browser window on the screen, and How do I make the window size match my layout? for detailed examples.
To find out, I performed tests with this window.open call that attempts to control everything:

window.open("nextpage.html", "one",
  "left=100, top=100, width=300, " +
  "height=300, location=no, menubar=no, resizable=no, " +
  "scrollbars=no, status=no, titlebar=no, toolbar=no");

But what actually happened? That depends on the web browser. The following table breaks it down for you. Yes means the browser did exactly what I told it to do. No means that the browser cheerfully ignored my request. Notes on some special cases are included below.

FeatureIE 7FirefoxSafari
Top Left CornerYesYesYes
Width and HeightYesYesYes
Hide Address BarNo (*)Yes (**)Yes
Hide Menu BarYesYesNo (***)
Disable ResizingYesNoYes
Disable ScrollbarsYesYesYes
Disable Status BarNoNoNo
Disable Title BarNoNoNo
Disable ToolbarYesYesYes

(*) Internet Explorer 7 will hide the conventional address bar, but replaces it with a non-editable address bar. This is an anti-phishing feature added in Internet Explorer 7. You cannot disable it from your JavaScript code.

(**) When you hide the address bar, Firefox prefixes the window title in the title bar with the URL of the site (not the entire URL of the page).

(***) Mac applications always display a single menu bar for the entire application, at the very top of the screen. So disabling the menu on a per-window basis doesn't really matter on the Mac. In a nutshell, you don't need to worry about menu bars on Macs.

As you can see, the major web browsers no longer allow several operations. These changes were made to prevent websites from masquerading as other websites or taking over the user's browsing experience. Bad experiences with phishing sites and the like have made users very distrustful of web pages that modify the web browser's standard behavior, so I recommend you not do so except when there is a very good reason for it as part of a web application. Trapping the user in your site is not a good reason and will only drive customers away.

Both Firefox and Internet Explorer offer ways of creating specialized "HTML applications" that run in a privileged mode and are able to use operations that are forbidden to web pages on the regular Internet. But these don't run from a web page— installing them is no easier than installing an executable program. This article assumes you are creating a web page on an Internet site and want to know what is possible in that context.

What About the Close Button?

Is there a way to keep the user from leaving the current web page? Not completely, no— and that's a good thing. But there's a way to give the user a clear warning that leaving the page is premature and could have a negative consequence, such as losing all the text they have just typed in. For more information and an explanation of how to do this, see my article how do I keep the user from leaving the page?

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!