Window is the base class of the client browser object model, and the Window object is the global object of the client JavaScript. A window object is essentially a separate window. For frame pages, each frame of the browser window contains a Window object.

Global scope

In the client browser, the Window object is the interface to access the BOM, such as referencing the Document property of the Document object, referencing its own window and self property, etc. Windows also provides global scope for client-side JavaScript.

The sample

Since the window is a global object, all global variables are resolved as properties of that object.

var a = "window.a"; Function f () {console.log(a); } console.log(window.a); // Returns the string "window.a"Copy the code

window.f(); // Returns the string “window.a”

The DELETE operator allows you to delete attributes, but not variables.

Access the client object

The window object is used to access other objects on the client. This relationship forms the browser object model. The Window object represents the root node.

Window: client-side JavaScript top-level object. The Window object is automatically created whenever the or label appears.

Navigator: Contains information about the client’s browser.

Screen: contains information about the client screen.

History: contains information about urls accessed by the browser window.

Location: Contains the URL of the current web page document.

Document: Contains the entire HTML document and can be used to access the document content and all page elements

Use the system dialog box

The Window object defines three personal computer interaction methods, mainly for debugging JavaScript code.

Alert () : Identifies the alert box. Prompt messages are presented to the user by the browser. This method contains an optional prompt message parameter. If no parameter is specified, an empty dialog box is displayed.

Confirm () : Select the prompt box. The prompt message is displayed by the browser to the user. The pop-up dialog box contains two buttons, indicating “OK” and “Cancel” respectively. This method returns true if the OK button is clicked; Click the Cancel button to return false. The Confirm () method also contains an optional prompt message argument, or an empty dialog box will pop up if no argument is specified.

Prompt () : Enter the prompt box. Can receive user input information, and return the input information. The prompt() method also contains an optional prompt message argument, which, if not specified, brings up an input text dialog box with no prompt.

Example 1 The following example demonstrates how to combine these three methods to design a human-computer interaction dialogue.

Var user = prompt(" Please enter your user name "); if (!! Var ok = confirm (" the username you entered: \n" + user + "\n "please confirm. ); // Enter the message to confirm if (ok) {alert (" Welcome: \n" + user); } else {// reenter the information user = prompt (" please reenter your user name: "); Alert (" welcome: \n" + user); }}else {// prompt input information user = prompt (" Please enter your username: "); }Copy the code

Open and close Windows

Use the open() method of the window object to open a new window. Usage:

window.open (URL, name, features, replace)
Copy the code

The parameter list is as follows:

URL: An optional string that declares the URL of a web page document to display in a new window. If omitted, or empty, the new window will not display any documents.

Name: An optional character string that declares the name of the new window. This name can be used as a target value for the tags < a > and < form >. If this parameter specifies an existing window, the open() method no longer creates a new window, but simply returns a reference to the specified window, in which case the Features parameter is ignored.

Features: An optional string that declares the features of the standard browser to be displayed in the new window, as described in the following table. If you omit this parameter, the new window will have all the standard characteristics.

Replace: Optional Boolean value. Specifies whether the URL loaded into the window creates a new entry in the window’s browsing history or replaces the current entry in the browsing history.

The newly created Window object has a opener property that refers to the original object that opened it. Opener is defined only in the outermost window object (top) of the pop-up window and points to the window or frame that calls the window.open() method.

The sample

The following example demonstrates the relationship between an open window and the original window.

win = window.open(); // Open a new blank window win.document.write ("<h1> This is the newly opened window </h1>"); Win.focus (); win.focus (); / / let the original window get focus win. Opener. Document. Write (" < h1 > < / h1 > this is the original window "); // Output the message console.log(win.opener == window); // Check the window.opener property valueCopy the code

Use the window close() method to close a window. For example, closing a newly created Windows window can be done using the following method.

win.close;
Copy the code

If you close your own window inside an open window, you should use the following method.

window.close;
Copy the code