Categories:

Opening new windows in theater and channel mode in IE

Quite down, the movie's about to start! While most JavaScripters are familiar with the window.open() method used to open a secondary window in JavaScript, many are not aware of two new features available exclusively in IE that allow them to control the look of this newly opened window in a whole new way. What am I talking about? Read on...

Opening a new window in theater mode

Since the window.open() method was first introduced in JavaScript, a variety of features existed to allow authors to control the overall look of this window, such as the width/height, whether location, toolbars, or status bar should appear in this window etc (if you're unfamiliar with these features, please see Windows and JavaScript). Well, along with IE, two new features accompanied, one of them being fullscreen. With this feature turned on, the window.open() method opens up a new window in theater mode, or full screen mode. Ok, you're thinking "full screen? Isn't that the same as simply turning off all of the features?" No, not quite. When I say full screen, I mean full screen.

Lets first talk syntax. To open up a new window in theater mode in IE, simply pass in the keyword "fullscreen" as the third parameter in the window.open() method:

<script type="text/javascript">
window.open("whatever.htm","","fullscreen")
</script>

Very simple, right? Right. Ok, before we actually see an example, you might want to remember the keys "Alt-F4"...

Press Alt F4 to close window!

<script type="text/javascript">
function go(){
window.open("index.html","","fullscreen,scrollbars")
}
</script>
<form>
<input type="button" onClick="go()" value="See example">
</form>

Hope you had remembered the keys (Alt F4), or your trip back undoubtedly was a bumpy one. With the "fullscreen" feature turned on, the only way to close the newly opened window is either by using the keys "Alt-F4", or by using the JavaScript method window.close(), since the window spans every inch of the screen. Notice that we also turned on the scrollbars in the above example; this is neccesary to ensure that browsers other than IE will also be able to navigate around the window when it is opened.

Use the fullscreen feature with care, since the resulting window, as you just witnessed, isn't exactly user-friendly. If you want to repossess your surfer's browser, there's no better way.

Opening a new window in channel mode

Another new window feature in IE that's similar to "fullscreen" above is "channelmode". With "channelmode" turned on, the window also expands to cover the entire screen, but is more user friendly in the sense that the window's title bar is preserved, allowing the user to easily close this window.

<script>
window.open("whatever.htm","","channelmode")
</script>

Ok, before we wrap up, lets quickly list again the two features seen in this tutorial:

fullscreen Opens up a new window that spans the entire screen. Press "Alt F4" to close it.
channelmode Opens up a new window that spans the entire screen, but with the title bar of the window intact.