Javascript Window Function guide-manipulation window

Once you get the variable that represents the window, you can manipulate it in various ways. In the previous introduction, we discussed the close () method:

Win = Window. Open ("http://www.docjs.com/", "JS ");

Win. Close ();

Javascript provides many methods and attributes that we can use to control the window.

Move, scroll, and change size

The following method (N4 +, ie4 +) is used to move, scroll, and change the size of a specific window:

// Move the screen position of the window to the specified offset X and Y (absolute movement)

Window. moveTo (IX, Iy)

// Move the screen position of the window to the specified offset X and Y (relative movement)

Window. moveBy (IX, Iy)

// Scroll the screen position of the window to the specified offset X and Y (absolute scroll)

Window. scrollto (IX, Iy)

// Scroll the screen position of the window to the specified offset X and Y (relative scrolling)

Window. scrollby (IX, Iy)

// Change the window size to the specified height and width (absolutely change the size)

Window. resizeTo (iwidth, iheight)

// Change the window size to the specified height and width (relative to the size of the window)

Window. resizeBy (IX, Iy)

Note that these methods belong to window objects, so they are intelligently executed in the current window or other Windows that can be referenced. If you want to dynamically set the position and size of the window, you can use the move and resize methods after the window is created.

Note: It is impossible to control a window containing other server pages.

Maximize window
Now we will introduce how to create a button to maximize the window after clicking.

Let's take a look at the HTML and JavaScript code for this button:

<Script language = "JavaScript">

<! --

Function maximizewin (){

If (window. Screen ){

VaR aw = screen. availwidth;

VaR Ah = screen. availheight;

Window. moveTo (0, 0 );

Window. resizeTo (AW, AH );

}

}

// -->

</SCRIPT>

<Form> <input type = "button" value = "maximize" onclick = "maximizewin ()"> </form>

Note that the resizeTo () method references the size of the entire window.

A floating Advertisement
On the website, the mobile advertising window can attract the attention of viewers. We can call the following function to make the window move left and right:

Function makead (){

Window. Open ("adpage.html", "ad", "width = 468, innerwidth = 468, Height = 80, innerheight = 80, Left = 0, Top = 0 ");

}

The following is the code of the page adpage.html:

<Script language = "JavaScript">

<! --

Function startad (){

If (window. Screen ){

Pos = 0;

Aw = screen. availwidth;

Window. moveTo (Pos, 0 );

Timerid = setinterval ("movead ()", 50 );

}

}

Function movead (){

If (Pos <= 0) Inc = 5;

// 5-so it doesn' t pass the right edge

// 10-accounts for the window chrome

If (Pos + 468 + 10 + 5> AW) Inc =-5;

Pos + = Inc;

Window. moveTo (Pos, 0 );

}

Window. onload = startad;

// -->

</SCRIPT>

When the page adpage.html is loaded, the startad () function is executed. If your browser supports window. screen objects, the window can be moved, because we need to use window. Screen to calculate the screen width. The window slides on the upper boundary of the screen from the upper left corner (Pos = 0) to the upper right corner.

Use the built-in setinterval () function to move 5 pixels in the advertising window every 50 milliseconds. If you click "stop", the following statement is executed:

Clearinterval (timerid );

Vibrating window
As you can see, the move method can help you attract users' attention. If you want to make visitors more shocked, you may want to add the following effects:

<Script language = "javascript1.2">

<! --

VaR quakeid = 0;

VaR totalx = 0;

VaR totaly = 0;

// Max pixels in each movement

VaR Maxshift = 10;

// Min movements in each quake

VaR minjumps = 10;

// Max movements in each quake

VaR maxjumps = 40;

// Min milliseconds between two quakes

VaR minbetweenquakes = 1000;

// Max milliseconds between two quakes

VaR maxbetweenquakes = 4000;

Function jump () {//-Maxshift to Maxshift

With (math)

Return (Maxshift + 1-Ceil (random () * (Maxshift * 2 + 1 )));

}

Function winshake (){

For (VAR I = 0; I <(minjumps + (math. Random () * (maxjumps-minjumps); I ++ ){

DX = jump ();

DY = jump ();

Window. moveBy (dx, Dy );

Totalx-= DX;

Totaly-= Dy;

}

Window. moveBy (totalx, totaly );

Totalx = 0;

Totaly = 0;

Quakeid = setTimeout ("winshake ()", math. Ceil (math. Random ()*

(Maxbetweenquakes-minbetweenquakes) + minbetweenquakes );

}

Window. onload = winshake;

// -->

</SCRIPT>

This script generates a series of seismic effects. When the page is reprinted (window. onload), it will begin to produce results.

The jump () method returns a random integer ranging from-Maxshift to Maxshift. The following code segment is responsible for a single vibration:

For (VAR I = 0; I <(minjumps + (math. Random () * (maxjumps-minjumps); I ++ ){

DX = jump ();

DY = jump ();

Window. moveBy (dx, Dy );

Totalx-= DX;

Totaly-= Dy;

}

Since we have no way to know the initial position of the window, we must track the size after each position adjustment. The totalx and totaly variables maintain the value of the window relative to the initial position. After the vibration effect is completed, the window moves back to the initial position.

Window. moveBy (totalx, totaly );

Totalx = 0;

Totaly = 0;

After a pause at any position, the winshake () function is called again:

Quakeid = setTimeout ("winshake ()", math. Ceil (math. Random ()*

(Maxbetweenquakes-minbetweenquakes) + minbetweenquakes );