The browser object Model (BOM) gives JavaScript the ability to "talk" to the browser. There is no formal standard for the browser object model (Browser object Model,bom). Because modern browsers (almost) implement the same methods and properties of JavaScript interactivity, they are often considered to be the methods and properties of a BOM.
Window object
Window objects are supported by all browsers. It represents a browser window. All JavaScript global objects, functions, and variables automatically become members of the Window object. A global variable is a property of a Window object. A global function is a method of a Window object. Even the document of the HTML DOM is one of the properties of the Window object.
Window.document.getElementById ("header");
The effect is the same as the following:
document.getElementById ("header");
Window size
For different versions of browsers, there are different ways to determine the size of the browser window.
For Chrome, Firefox, opera, and Safari:
- Window.innerheight-Internal height of the browser window (including scroll bars)
- Window.innerwidth-Internal width of the browser window (including scroll bars)
For IE8, 7, 6, 5:
- Document.documentElement.clientHeight
- Document.documentElement.clientWidth
Or
- Document.body.clientHeight
- Document.body.clientWidth
JavaScript scenarios that cover all browsers:
var w=window.innerwidth | | Document.documentElement.clientWidth | | Document.body.clientWidth; var h=window.innerheight | | Document.documentElement.clientHeight | | Document.body.clientHeight ;
Other methods of the Window object:
- window.open ()-Open a new window
- Window.close ()-Close the current window
- Window.moveto ()-Move the current window
- Window.resizeto ()-Adjusts the size of the current window.
JavaScript Window Screen
The window Screen object contains information about the user's screens. The window screen object can be used without the window prefix. Common properties: screen.availwidth-available screen widths; screen.availheight-Available screen height
The Screen.availwidth property returns the width of the visitor's screen, in pixels, minus interface features, such as the window's taskbar.
The Screen.availheight property returns the height of the visitor's screen, in pixels, minus the interface features, such as the window task bar
JavaScript Window Location
The Window.location object is used to obtain the address (URL) of the current page and redirect the browser to a performance page. The Window.location object can be written without using the window prefix.
- Location.hostname returns the domain name of the Web Zhuji
- Location.pathname returns the path name and file name of the current page
- Location.port returns the port of the Web Zhuji (80 or 443)
- Location.protocol returns the Web protocol used (HTTP///https://)
Window location Href
Location.href returns the (full) URL of the current page
Window location Pathname
Location.pathname property returns the path name of the URL
Window location Assign
The Location.assign () method loads the new document. Syntax: Window.location.assign ("http://www.w3cschool.cc");
JavaScript Window History
The Window.history object contains the history of the browser. Window.history does not use the window prefix when it is written. To protect the privacy of the user, there are restrictions on how JavaScript accesses the object. Common methods:
- History.back ()-The previous URL in the Load history list is the same as clicking the Back button in the browser
- History.forward ()-The next URL in the Load history list is the same as clicking the Forward button in the browser
JavaScript Window Navigaror
The Window.navigator object contains information about the visitor's browser. The window.navigator object can be written without using the window prefix. Common Properties:
- Navigator.appcodename-Browser code
- Navigator.appname-Browser name
- Navigtor.appversion-Browser version
- Navigator.cookieenabled-Enable cookies
- Navigtor.platform-Hardware Platform
- Navigator.useragent-User Agent
- Navigator.systemlanguage-User Agent language
Note: The information from the Navigator object is misleading and should not be used to detect browser versions because:
- Navigator data can be changed by browser user
- Some browsers will identify errors for the test site
- The browser cannot report a new operating system that is later than the browser published
Browser detection
Because navigator can mislead browser detection, using object detection can be used to sniff out different browsers. Because different browsers support different objects, you can use the object to detect the browser. For example: only opera supports the attribute "Window.opera". Opera can be identified accordingly. Example: if (Window.opera) {...}
JavaScript Pop-up window
You can create three message boxes in javascript: A warning box, a confirmation box, and a prompt box.
Warning Box (alert ()): Often used to ensure that users can get some messages. When the warning box appears, the user needs to click the OK button before proceeding. Syntax: Window.alert ("text"); This method can be used without the window prefix and directly using the alert () method.
Confirmation Box (confirm ()): The confirmation box is often used to verify that user actions are accepted. When the confirmation box pops up, the user can click "Confirm" or "Cancel" to determine the user action. When you click "Confirm", the confirmation box returns true, and if you click "Cancel", the confirmation box returns false. Syntax: the Window.confirm () method can be used without a Window object, using the Confirm () method directly.
Prompt box (prompt ()): The prompt box is often used to prompt the user to enter a value before entering the page. When the prompt box appears, the user needs to enter a value and then click the Confirm or Cancel button to continue the operation. If the user clicks Confirm, then the return value is the value entered. If the user clicks Cancel, the return value is null.
Syntax: window.prompt ("text", "DefaultValue"); This method can be used without the window prefix and directly using the prompt () method.
var person = prompt ("Please enter your name"); if (person!=null$ $person. Trim () length () >0) { var x = "Hello" + person + "! How are you feeling today?" " ; document.getElementById ("Demo"). InnerHTML = x;}
Line break
The pop-up window uses a backslash +n (\ n) to set the line break.
Alert ("Hello \nhow is you ?")
JavaScript Window---Browser object model