Working with Windows: Utilizing Window Features
   |
Working with Windows
Utilizing Window Features
In the previous section of this tutorial we covered the bulk of window features that JavaScript provides. Many of these features are browser-specific, meaning that they don't working in both Internet Explorer and Navigator. In this section of the column we'll explore several interesting workarounds, and a few useful tips.
Specifying Window Dimensions
We'll use the height, width, innerHeight, and innerWidth parameters to specify the new window's dimensions. Internet Explorer supports height and width, while Navigator uses innerHeight and innerWidth for the same purpose. Navigator also supports the outerHeight and outerWidth features, which specify the dimensions of the outer boundary of the window (including the titlebar, the scrollbars, and other operating system elements). Since these features don't have equivalent Internet Explorer features, we'll use height, width, innerHeight, and innerWidth instead. Each browser ignores the other set of features, so we'll specify all four of them when we create a new window:
window.open("dimensions.html", "_blank", "height=150,innerHeight=150,width=200,innerWidth=200");If you've got both browsers on your machine, go ahead and compare JavaScript's various window dimension feature:
Opening a Full-Screen Window
Internet Explorer supports the fullscreen property that creates a window that occupies the full screen, regardless of monitor size or resolution. Canvas-mode windows provide a useful environment for slide shows or presentations. Take a look at the following example:
<SCRIPT LANGUAGE="JavaScript">
<!--
var str = "left=0,screenX=0,top=0,screenY=0";
if (window.screen) {
var ah = screen.availHeight - 30;
var aw = screen.availWidth - 10;
str += ",height=" + ah;
str += ",innerHeight=" + ah;
str += ",width=" + aw;
str += ",innerWidth=" + aw;
} else {
str += ",resizable"; // so the user can resize the window manually
}
function launchFull(url, name) {
return window.open(url, name, str);
}
var win = launchFull("full1.html", "full");
// -->
</SCRIPT>
Go ahead and give it a shot:
Let's see how it works. First, we assign an initial value to the global variable str. It specifies that the new window should be placed in the upper-left corner of the screen. Don't worry about the string, because it is explained later in this section of the column. The next statement checks if the browser supports the screen object (Internet Explorer 4+, Navigator 4+). If it isn't supported, we use the resizable feature so that the user can manually resize the new window to accommodate the full screen. But if the browser supports the screen object, we can take advantage of screen.availHeight and screen.availWidth to determine the height and width of the working area of the system's screen, excluding any system elements (such as the Windows taskbar). Because the height, width, innerHeight, and innerWidth features don't account for the window chrome, the approximate pixel size of the chrome must be subtracted.
If you want to take advantage of Explorer's fullscreen feature, just add it to the script:
var str = "left=0,screenX=0,top=0,screenY=0,fullscreen";
We don't need to check if the browser is Internet Explorer, because when the fullscreen feature is specified, the other features are ignored. Use the following button to check the result if you are running Internet Explorer:
Specifying Window Coordinates
We'll use the left, top, screenX, and screenY parameters to specify the new window's coordinates. Internet Explorer supports left and top, while Navigator uses screenX and screenY for the same purpose. Each browser ignores the other set of features, so we'll specify all four of them when we create a new window:
window.open("https://www.docjs.com/", "_blank", "left=20,screenX=20,top=40,screenY=40");Remember that left should always be specified with screenX, and top should always come with screenY. If you experiment with these features, you'll discover that Navigator also supports left and top. However, this is an undocumented behavior, so you shouldn't rely on it (because future versions of Navigator may not support it). Furthermore, if you specify different values for left and screenX, Navigator will use the value assigned to screenX. Likewise, Navigator will ignore the top feature if it finds screenY.
Keep in mind that these features are measured in pixels, with respect to top-left corner of the screen. Even if you call the window.open() method in a frame, the specified values still refer to the edge of the screen.
Opening a Centered Window
Now that you know how to position a new window, it's time to add some math. The following script opens a centered window:
<SCRIPT LANGUAGE="JavaScript">
<!--
function launchCenter(url, name, height, width) {
var str = "height=" + height + ",innerHeight=" + height;
str += ",width=" + width + ",innerWidth=" + width;
if (window.screen) {
var ah = screen.availHeight - 30;
var aw = screen.availWidth - 10;
var xc = (aw - width) / 2;
var yc = (ah - height) / 2;
str += ",left=" + xc + ",screenX=" + xc;
str += ",top=" + yc + ",screenY=" + yc;
}
return window.open(url, name, str);
}
var win = launchCenter('center.html', 'center', 220, 440);
// -->
</SCRIPT>
This script is very similar to the full-screen script. It uses the screen.availHeight and screen.availWidth properties, along with the desired size of the new window, to calculate the exact position of the upper-left corner of the window. If you're having a hard time understanding the meaning of (aw - width) / 2, then take a look at the following expression:
(aw / 2) - (width / 2)
As you can see, they are the same. We're substracting half of the window's width from the middle of the screen (half of the screen's width). The same applies to the window's vertical coordinate. Click the following button to open the centered window:
Backward-Compatible Links
When we write a script, it's important to account for users that don't have JavaScript-enabled browsers. This usually happens when users disable JavaScript in their browsers. So if JavaScript isn't enabled, we should still be able to launch a window with HTML. Take a look at the following link:
<A HREF="https://www.docjs.com/" TARGET="win">Doc JavaScript</A>It opens a new window, named win (if it isn't already open), and loads the specified URL into the window. The following link uses JavaScript for the same purpose:
<A HREF="javascript:void(window.open('https://www.docjs.com/', 'win', 'status'))">Doc JavaScript</A>The JavaScript-based link creates a simple window which features a status bar, but doesn't include other default elements (such as a toolbar). The previous HTML link, however, opens a default browser window. Both links open a window (win) and load the same URL into the new window. With JavaScript we have control over the appearance of the new window, but if the browser doesn't support JavaScript, the link is useless. Therefore, we'll combine these links:
<A HREF="https://www.docjs.com/" TARGET="win"
onClick="window.open('https://www.docjs.com/', 'win', 'status'); return false">Doc JavaScript</A>If JavaScript is enabled, the browser executes the code in the onClick event handler before it loads the URL in the HREF attribute. Since the event handler returns false, the browser ignores the HREF attribute, as if the user didn't click the link at all. In fact, the statement return false simply cancels the "click." If the browser doesn't support JavaScript, it won't run the onClick event handler, so the specified URL is loaded like any other HTML link (with a TARGET attribute).
Creating a Signed Script
Signed scripts are beyond the scope of this tutorial. If you're interested in this topic, be sure to check out Netscape's documentation. If you only want to view the window features that require a signed script, you can activate codebase principals.
Next: How to check if a window exists
Produced by Yehuda Shiran and Tomer Shiran
Created: April 10, 2000
Revised: April 10, 2000
URL: https://www.webreference.com/js/tutorial1/properties.html
Find a programming school near you