JavaScript provides a set of objects with window as the core, realizing access control of browser windows. 6 important objects are defined in JavaScript:
The window object represents a window that opens in the browser;
The document object represents the document object that loads the page in the browser;
The location object contains the current URL information of the browser;
The navigation object contains information about the browser itself;
The screen object contains information about the client screen and rendering capabilities;
The history object contains the historical information of the browser accessing the web page.
In addition to the window object, the other five objects are properties of window object. Their relationship is as follows:
1. Windows object
The window object is a JavaScript Global object, so the properties and methods of using the window object do not need to be specified. For example: alert, the complete call is actually window.alert, which usually omits reference to the window object.
1. Properties, methods, and events of windows object
| Attribute name | effect | demo |
|---|---|---|
| name | Specify the name of the window | |
| parent | The parent window of the current window (frame), using it to return the method and properties of the object | |
| opener | Returns the window object that produces the current window, and uses it to return the method and properties of the object | |
| top | It represents the main window, is the top-level window, and is also the parent window of all other windows. The methods and properties of the current window can be accessed through this object | |
| Self | Returns an object in the current window through which methods and properties of the current window can be accessed. | |
| defaultstatus | Return or set the default content that will be displayed in the browser status bar | |
| status | Return or set the specified content that will be displayed in the browser status bar |
| Method name | effect | demo |
|---|---|---|
| alert() | Displays an alert dialog box containing a message and an OK button | |
| confirm() | Show a confirmation dialog box | |
| prompt() | Display a prompt dialog box prompting the user to enter data | |
| open() | Open an existing window, or create a new window and load a document in that window | |
| close() | Close an open window | |
| navigate() | Display the specified web page in the current window | |
| setTimeout() | Set a timer and call a function after the specified time interval is passed. | |
| clearTimeout() | Reset the specified timer | |
| focus() | Make a Window object get the current focus | |
| blur() | Make a Window object lose its current focus |
| event | illustrate | demo |
|---|---|---|
| onload | Occurs when HTML files are loaded into the browser | |
| onunload | Occurs when HTML files are deleted from the browser | |
| onfocus | Occurs when the window gets focus | |
| onblur | Occurs when the window loses focus | |
| onhelp | Occurs when the user presses the F1 key | |
| onresize | Occurs when the user resizes the window | |
| onscroll | Occurs when the user scrolls the window | |
| onerror | Occurs when an error occurs when loading an HTML file |
2. The main functions provided by the window object:
Adjust the size and position of the window, open a new window, system prompt box, status bar control, and timing operations. The following are the following descriptions of these 5 functions.
(1) Adjust the size and position of the window
method | usage | illustrate |
window.moveBy Move the browser window to the specified location (relative positioning) | window.moveBy(dx,dy) | For security and good user considerations, JavaScript scripts are not allowed to be used to move windows outside the visual area. The browser window must always be guaranteed to be in the visual area of the screen. |
window.moveTo Move the browser window to the specified location (Absolute positioning) | window.moveBy(x,y) | If the specified coordinates (x,y) put some or all of the windows outside the visible area, the window will stay closest to the edge of the screen. |
window.resizeBy Change the size of the browser window to the specified width and height (relatively resize the window) | window.resizeBy(dw,dh) | |
window.resizeTo Change the size of the browser window to the specified width and height (absolutely resize the window) | window.resizeTo(w,h) | The specified width and height cannot be negative |
(2) Open a new window
Usage: window.open([url],[target],[options])
Parameter url: The url to be loaded in the new window. If no parameters are specified, the blank page will be loaded by default. For example: window.open("test.htm");
Parameter target: the target or name of the newly opened window
_self Load new page in the current window
_blank Load new page in new window
_parent loads new page in parent window
_top loads new page in top window
Parameter options: The properties of the newly opened window are composed of several options, separated by commas, and each option contains the name and value of the option.
Options | illustrate |
height | The height of the window, unit pixels |
width | The width of the window, unit pixels |
left | The left edge position of the window |
top | The upper edge position of the window |
fullscreen | Whether to be full screen, default value no |
location | Whether to display the address bar, the default value is yes |
menubar | Whether to display the menu bar, the default value is yes |
Resizable | Whether to allow changing the window size, the default value is yes |
scrollbars | Whether to display scrollbars, default value yes |
status | Whether to display the status bar, the default value is yes |
titlebar | Whether to display the title bar, the default value is yes |
toolbar | Whether to display the toolbar, the default value is yes |
(3) System prompt box
window.alert displays message prompt box, usage window.alert([Message]); (Note: window objects are generally omitted, and alert is directly used)
window.confirm Displays a confirmation dialog box that includes the OK and Cancel buttons.
window.prompt Displays a message prompt box containing a text input box.
Usage: window.prompt([Message],[default]); Message is the text displayed on the prompt box, and default is the default value of the text box.
(4) Status bar control
Controlled through the window.status property. For example: window.status="Error prompt"; Doing so will affect the user experience, so it is not recommended to modify the status bar information.
(5) Timed operation
Timing operations are commonly used functions in web development. In development based on Ajax technology, there is a type of application that needs to access the backend server regularly and update the frontend page. This type of application implementation usually depends on timing operation functions.
There are four timing operation functions: window.setInterval, window.clearInterval, window.setTimeout, and window.clearTimeout. These four functions are methods of window objects, which means that the timing operations in the browser are completed by the browser window. The following is a detailed introduction to the usage of these four methods.
① window.setInterval sets the timer and executes the specified code window.setInterval(code, time);
Description: The code parameter can be a function or a JavaScript code in the form of a string
The time parameter is the time interval for executing the code, and the unit is ms.
② window.clearInterval Clear the timer set by the setInterval function window.clearInterval(time);
③ window.setTimeout Sets the timer and executes the specified code window.setTimeout(code,time);
Note: The code parameter can be a function or a JavaScript code in the form of a string. The difference between setTimeout and setInterval is that setTimeout only executes the specified code once.
The time parameter is the time interval for executing the code, and the unit is ms.
④ window.clearTimeout Clear the timer set by the setTimeout function window.clearTimeout(time);
The above detailed explanation of Window object, one of the JavaScript browser objects, is all the content shared by the editor. I hope it can give you a reference and I hope you can support Wulin.com more.