JavaScript Window---Browser object model

Source: Internet
Author: User

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

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.