Shulou(Shulou.com)06/03 Report--

JavaScriptWindow window object properties and usage, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

I. Overview of Window objects

The Window object can be used to open the browser, adjust the browser's location, size, and so on.

The Window object can handle the relationship between frames and frames, through which documents in one frame are processed in another. It is also the top-level object of all objects, and more effects can be achieved by manipulating sub-objects of the Window object.

1. Window object properties

Each object has its own properties, and the top-level object Window, which is the parent of all other child objects, can appear on every page and can be used multiple times in a single JS application.

The following table lists some common properties of Window objects:

Document dialog box displays the current document frames represents the collection of all frame objects in the current dialog box location specifies the name of the current document URLname dialog box current information in the status/defaultStatus status bar top represents the top-most browser dialog box parent/opener indicates the husband dialog box containing the current dialog box closed indicates whether the current dialog box is closed (Boolean) self indicates that the current dialog box screen represents the user screen Provide information such as screen size, color depth, etc. Navigator represents browser objects and is used to obtain browser-related information.

2. Window object method

Alert () pop-up warning dialog box confrim () displays the specified string in the confirmation dialog box prompt () pops up a prompt dialog box open () opens a new browser dialog box and displays the document referenced by URL or name And set the properties of the create dialog box close () to close the referenced dialog box focus () specify that the dialog box is placed at the front of all browsers blur () specify that the dialog box is placed at the back of all browsers scrollTo (x) scroll the dialog box to the specified coordinates scrollBy (offsetx,offsety) scroll dialog box setTimeout (timer) according to the specified displacement dialog box (timer) after the specified number of milliseconds Evaluate the passed expression setInerval (interval) specify periodic execution code moveTo (XMague y) move the dialog box to the specified coordinates moveBy (offsetx,offsety) move the dialog box to the specified displacement resizeTo (xMague y) set dialog box size resizeBy (offsetx,offsety) set the dialog box size print () print (URL) use the dialog box to display the page specified by URL

3. How to use it

The JS run uses a string to name the window, or you can use some keywords instead.

Window objects can call methods and properties directly, without using the new operator to create objects:

Window. Attribute name window. The method name (parameter list) / / uses keywords instead of window / / parent. Attribute name parent. Method name (parameter list)

2. Dialog box

A small pop-up window that pops up in response to a user's need

1. Warning dialog box-- alert ()

The syntax is as follows:

Window.alert (str)

A warning dialog box pops up. Str is the string displayed in the dialog box. The general running result is as follows:

2. Confirm the dialog box-confrim ()

The syntax is as follows:

Window.confrim (question)

Where question is the plain text to be displayed in the confirmation dialog box, and it also expresses the questions that the program wants users to answer.

And he has a return value if he clicks OK to return true and vice versa.

For example, the following segment of Mini Program:

Var flag = window.confirm (are you sure you want to close the browser window?) If (flag) window.close ()

The following results are displayed:

3. Prompt dialog box-- prompt ()

A prompt box pops up, and there is an input box in the prompt box. When the input box is displayed, the prompt string is displayed in the input box, and the default text is displayed in the input text box and waiting for the user to enter. After entering, click OK to return the string entered by the user. If it is canceled, return the null value.

The syntax is as follows:

Window.prompt (str1,str2)

Parameter description: where str1 represents the information to be displayed in the dialog box, and str2 specifies the value of the input box in the dialog box.

For example, the following segment of Mini Program:

Function pro () {var message = document.getElementById ("message"); message.value = window.prompt (message.value, "returned information")}

The effect is as follows:

Open and close the window

1. Open the window-- open ()

Syntax format:

WindowVar = window.open (url,name, [location])

Parameter description:

WindowVar: if the open method succeeds, a handle to the Window object is returned. URLname of url target window: target window Window object name location: optional parameter of the exam window

His optional parameters are shown in the following table:

The number of pixels at the top of the top window from the top of the screen to the left end of the left window the number of pixels width/height width / height scrollbars display scroll bar resizable set dialog box size fixed toolbar browser toolbar, including back and forward buttons menubar menu bar, generally includes files, edits and other entries location positioning area, address bar direction update information button

Here are a few examples:

Open a new window: window.open ("new.html", "new")

Opens a window of specified size: window.open ("new.html", "new", "height=140,width=690")

Opens a window at the specified location: window.open ("new.html", "new", "top=300,left=200")

Open a docked window with scroll bars: window.open ("new.html", "new", "scrollbars,resizable")

2. Close the window

(1) close the current window

Any of the following statements can close the current window:

Window.close (); close (); this.close ()

Example: automatically refresh the parent window when the child window is closed

Step 1: on the original page, use a link to open a new window, as follows:

Open a link

Step 2: create a new new.html, and then write a script and a button as follows:

Function clo () {alert ("close child windows!") ; window.opener.location.reload (); / / refresh parent window window.close ();} var win = window.open ("new.html", "new", "width=300,height=100"); function newclose () {win.close ();}

The effect is as follows:

4. Control window

1. Move the window

(1) moveTo () method

The syntax is as follows:

Window.moveTo (XBI y)

Where xPowery is the coordinate of the upper left corner of the window.

(2) resizeTo () method

This method can change the current window to the size of (xrem y), where x and y represent width and height, respectively. The syntax is as follows:

Window.resizeTo (XBI y)

(3) screen object

The screen object reflects the current user's screen settings, and the following table lists some properties of the screen object:

Width horizontal size of the entire screen height Vertical size of the entire screen pixelDepth display the number of bits per pixel colorDepth returns the number of digits used in the current color setting, 1 represents black and white; 8 represents 256colors (256colors); 16 represents enhanced colors (about 64000 colors); 24Universe 32 represents true color (16 million colors) availWidth returns the horizontal size of the window content area availHeight returns the vertical size of the Chuankang content area

2. Window scrolling

The scroll () method of the Window object can be used to specify the current position of the window, thus achieving the scrolling effect of the window. The syntax is as follows:

Window.scroll (XMague y); / / Scroll to the specified absolute position, relative to the upper left corner of the document window.scrollTo (xQuery y); / / ditto window.scrollBy (xPowery); / * you can scroll the document to the relative position, if the parameter x is positive, scroll to the right, otherwise to the left; if the parameter y is positive, scroll down, otherwise up * /

For example, choose a picture of our goddess Jiang Shuying to enlarge the picture, and then write a script:

Var pos = 0; function scroller () {pos++; scrollTo (0Magnepos); clearTimeout (timer); var timer = setTimeout ("scroller ()", 10);} scroller ()

The effect is as follows: (so beautiful! )

3. Change the window size

Implement to change the current window to the specified size (xmemy). When xmemy > 0 is enlarged, it is reduced instead. The syntax is as follows:

Window.resizeBy (XBI y)

Example: dynamically resize the window

The code is as follows:

Var winheight,winsize,x; function openwin () {winheight=100; winsize=100; xonom5; win2 = window.open ("new.html", "", "scrollbars='no'"); win2.moveTo (0screen.availHeight-3 0); win2.resizeTo (100100); resize ();} function resize () {if (winheight > = screen.availHeight-3) xpen0; win2.resizeBy (5Powerx); winheight+=5; winsize+=5; if (winsize > = screen.width-5) {winheight=100; winsize=100; return;} setTimeout ("resize ()", 50) } Open a window that resizes automatically

The effect is as follows:

4. Access window history

The history object is used to access the window history. The history object is a read-only array of URL strings, which mainly stores a list of URL addresses that have recently visited the web page. The syntax is as follows:

[window.] history.property | method ([parameters])

Common properties of history objects:

The length of the length history list, which is used to determine the number of entries in the list. Current the previous URL of the next URLprevious history list of the URLnext history list of the current document.

Common methods:

Back () returns to the previous page forward () re-enters the next page go () enters the specified web page

For example, use the back () and forward () methods in the history object to guide the jump:

Forwardback

Use the history.go () method to specify the history to access, if the parameter is positive, move forward, otherwise move backward

Go back once, forward twice.

The length property accesses the length of the history array, which allows you to quickly access the end:

End

5. Set timeout

Setting what to do for a window after a certain period of time is called setting a timeout

The setTimeout () method of the window object is used to set a timeout, with the following syntax:

TimerId = setTimeout (code to be executed in milliseconds)

You can also use clearTimeout () to abort the timeout setting, in the following syntax format:

ClearTimeout (timerId)

After reading the above, have you mastered the properties of the JavaScriptWindow window object and how to use it? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.