Javascript window feature Guide

In the previous section, we fully touched on the window features provided by JavaScript. Many of these features are based on special browsers, that is, they cannot work in Internet Explorer and navigator at the same time. In this section, we will explore several interesting aspects and some useful techniques.

Specify Window Scale
We use the parameters height, width, innerheight, and innerwidth to define the scale of the new window. Internet Explorer supports height and width, while navigator uses innerheight and innerwidth. Navigator also supports the outerheight and outerwidth features, which specify the scale of the perimeter boundary of the window, including the title bar, scroll bar, and other operating system elements. To achieve the same purpose in Internet Explorer, we use height, width, innerheight, and innerwidth. Each browser ignores other features, so when creating a new window, you can define all four.

Window. Open ("dimensions.html", "_ blank", "Height = 150, innerheight = 150, width = 200, innerwidth = 200 ");

If you have two browsers on your machine, you can compare different window-scale features of JavaScript.

Open a full screen window
Internet Explorer supports the fullscreen attribute, which allows you to create a window that overwrites the full screen without considering the actual size of the display. 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>

Let's see how it works. First, we assign an initial value to the global variable STR, which specifies that the new window is located in the upper left corner of the screen. Don't worry about this string. I will explain it later in this section. The next statement checks whether the browser supports screen objects. If not, we use the resizable feature so that users can manually change the size of the new window to adapt to the entire screen. However, if the browser supports screen objects, you can make full use of screen. vavilheight and screen. vavilwidth is used to determine the height and width of the work area on the System screen, including any system elements, such as the taskbar. Because features such as height, width, innerheight, and innerwidth cannot accurately describe the window boundary, the approximate pixel value must be subtracted.

To make full use of the fullscreen feature of the browser, simply add the following script program:

VaR STR = "Left = 0, screenx = 0, Top = 0, screeny = 0, fullscreen ";

We do not need to check whether the browser is Internet Explorer, because when the fullscreen feature is defined, other features are ignored.

Define window coordinates
The left, top, screenx, and screeny parameters are used to specify the coordinates of the new window. Internet Explorer supports left and top, while navigator uses screenx and screeny.

Window. Open ("http://www.docjs.com/", "_ blank", "Left = 20, screenx = 20, Top = 40, screeny = 40 ");

Remember, left should always be defined with screenx, and top should be defined with screeny. If you have used these features, you will find that navigator also supports left and top. However, this is an undisclosed operation, so you should not rely on it (because it may not be supported in future navigator versions ). If different values are specified for left and screenx, navigator uses the value allocated to screenx. Similarly, if screeny is specified, navigator ignores top.

Remember, these features are measured in pixels and are based on the top left corner of the screen. Even if you call the window. open () method in the Framework, the specified value is still subject to the screen boundary.

Open a center window

Now you know how to place a new window and add some algorithms below. The following script opens a center 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 attributes, and adds the expected size of the new window to calculate the precise position in the upper left corner of the window. If it is difficult to understand the meaning of (Aw-width)/2, take a look at the formula below:

(AW/2)-(width/2)

As you can see, they are the same, that is, the center of the screen minus half of the window width. The same algorithm is applied to the vertical coordinates of the window.

Backward compatible links
When writing a script program, it is very important for users who cannot use JavaScript, which often happens when users block the JavaScript function in the browser. When this happens, we should still be able to load a window using HTML. Take a look at the following link:

<A href = "http://www.docjs.com/" target = "win"> Doc JavaScript </a>

This opens a window named win, in which the URL defined is loaded. The following link uses JavaScript For the same purpose:

<A href = "javascript: void (window. Open ('HTTP: // www.docjs.com/', 'win', 'status')"> Doc JavaScript </a>

A simple window is created based on the Javascript link, which has a status bar, but does not include other default elements (such as the toolbar ). However, the window opened by the preceding HTML link is a default browser window. The two methods achieve the same purpose. With JavaScript, we can control the appearance of the new window, but if the browser does not support JavaScript, such a link will be useless. Therefore, we merge these links:

<A href = "http://www.docjs.com/" target = "win" onclick = "window. open ('HTTP: // www.docjs.com/', 'win', 'status'); Return false "> Doc JavaScript </a>

If Javascript is activated, the Browser executes the onclick event handler before loading the URL defined by the href attribute. Because the event handler returns false, the browser ignores the href attribute, as if the user has not clicked the link at all. In fact, the return false statement simply suspends "click ". If the browser does not support JavaScript, it will not run the onclick event handler. Therefore, like other html links, the specified URL is loaded.