A summary of how JavaScript manipulates windows

Source: Internet
Author: User
Tags relative setinterval
Once you get the variable that represents the window, you can manipulate it in a variety of ways. Here's a look at the various operations on the window

In the previous introduction, we discussed the Close () method:

Copy Code code as follows:


win = window.open ("http://www.jb51.net/", "JS");


win.close ();


JavaScript provides a number of methods and properties that we can use to control windows.
Move, scroll, change size
The following method (n4+,ie4+) is responsible for moving, scrolling, and resizing the fixed window:

Copy Code code as follows:


//Move the screen position of the window to the specified offset X, y (absolute move)


Window.moveto (IX, IY)


//Move the screen position of the window to the specified offset x, y (relative move)


Window.moveby (IX, IY)


//scrolling the screen position of the window to the specified offset X, y (absolute scrolling)


Window.scrollto (IX, IY)

The screen position of the
//scrolling window to the specified offset x, y (relative scrolling)


Window.scrollby (IX, IY)


//Change the window size to the specified height and width (absolute resize)


Window.resizeto (iwidth, iheight)


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


Window.resizeby (IX, IY)


Note that these methods belong to the Window object, so they are intelligently executed in the current window or other window 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.
Form
Note that it is not possible to control a window that contains other server Pages.
Maximize window
Let's now describe how to make a button that maximizes the window after you click it.
Here's a look at the HTML and JavaScript code for this button:

Copy Code code as follows:


<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 refers to the size of the entire window. Form
A floating AD.
On the website, through the Mobile Advertisement window, can attract the visitor's attention. We can make the window move around by calling the following function:

Copy Code code as follows:


function Makead () {


window.open ("adpage.html", "ad", "Width=468,innerwidth=468,height=80,innerheight=80,left=0,top=0");


}


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

Copy Code code as follows:


<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 + 5 > AW) inc =-5;


POS + inc; A380fa.com


Window.moveto (POS, 0);


}


window.onload = Startad;


//-->


</SCRIPT>


The function Startad () is executed when the page is adpage.html loaded. If the user's browser supports the Window.screen object, the window cannot move because we need to use Window.screen to calculate the width of the screen. The window slides over the top edge of the screen, from the top left corner (pos=0) to the upper-right corner. The
uses the built-in setinterval () function to move 5 pixels of the ad window every 50 milliseconds. If you click the "Stop" button, the following

is executed.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.