Common browser objects

The Browser Object Model (BOM) is the Browser Object Model. It provides objects that interact with the Browser window independently of content. The core Object is window.

  1. window
  2. history
  3. location
  4. navigter
  5. screen
  6. document

The window object

The window object not only acts as a global object but also represents the window of the current browser,

  • Global variables are properties of the window object, and global functions are methods of the window object

alert()

Confirm prompt

  • 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.

prompt()

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.

confirm()

Input 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.

window.onload

Window loading event

  • The event is triggered when the document content is fully loaded (including images, scripts, CSS files, and so on).

Window. The innerWidth and window. InnerHeight

Get the width and height of the current browser (minus toolbar and scrollbar)

Window method

  • window.open()– Open a new window
  • window.close()– Close the current window
  • window.moveTo()– Moves the current window
  • window.resizeTo()– Readjust the current window

The history object

The history object holds a history of the user’s Internet access from the moment the window was opened.

history.go()

  • Receives an integer number or string argument: Jumps to the page whose most recent record contains the specified string
history.go('maixaofei.com')	// Search forward or backward for the specified string page
history.go(3)	// Jump forward to three records
history.go(-1)	// Jump backwards to a record
Copy the code
  1. history.forword()
  • Jump forward one page
  1. history.back()
  • Jump backwards to a page
  1. history.length
  • If it is the first page opened, then history.length == 0, which can be used to determine whether the currently opened web page is the first page opened in the window.

Location object

The location property is used to get or set the FORM’s URL, and can be used to parse the URL. Because this property returns an object, we will also call this property a Location object.

URL:

Uniform Resource Locator (URL) is the address of standard resources on the Internet. Every file on the Internet has a unique URL that contains information indicating where the file is and what the browser should do with it.

  • The URL consists of the resource type, host domain name for storing the resource, and resource file name.
  • URL general syntax specification:
Protocol :// hostname[:port] / path / [;parameters][? Query]#fragment protocol :// hostname :port number/path/parameterCopy the code
  • Path: A string separated by zero or more slashes (/) to indicate the address of a directory or file on a host.
  1. hash
  • Sets or returns the URL (anchor) starting with the hash sign (#).
  1. host
  • Sets or returns the hostname and port number of the current URL.
  1. hostname
  • Sets or returns the host name (domain name) of the current URL.
  1. href
  • Sets or returns the full URL.
  1. pathname
  • Sets or returns the path portion of the current URL.
  1. port
  • Sets or returns the port number of the current URL (if it is the default (HTTP port 80, HTTPS port 443), most browsers display 0 or none).
  1. protocol
  • Sets or returns the protocol for the current URL.
  1. earch
  • Sets or returns from question mark (?) The starting URL (query section).

navigter

  1. navigator.appName: Browser name; Note: “Netscape” is the name of the application for Internet Explorer 11, Chrome, Firefox, and Safari.
  2. navigator.appVersion: Browser version;
  3. navigator.appCodeName: Returns the application code name of the browser
  4. navigator.language: language for setting the browser;
  5. navigator.platform: Operating system type.
  6. navigator.userAgent: User-agent character string set by the browser.
  7. navigator.cookieEnabled: returns true if cookies are enabled, false otherwise.
  8. navigator.product: Returns the product name of the browser engine
  9. navigator.platformReturn to the browser platform (operating system)
  10. navigator.onLineThe: property returns true if the browser is online
  11. navigator.javaEnabled()The: method returns true if Java is enabled

Information from navigator objects is often misleading,

Should not be used to detect browser versions because:

  • Different browsers can use the same name
  • Navigation data can be changed by the browser owner
  • Some browsers misidentify themselves to bypass site tests
  • The browser cannot report new operating systems released later than the browser

screen

Represents information about the user’s screen

  1. screen.widthReturns the visitor’s screen width in pixels
  2. screen.heightReturns the height of the visitor’s screen in pixels
  3. screen.availWidthReturns the width of the visitor’s screen, in pixels, minus interface features such as window toolbars
  4. screen.availHeightReturns the height of the visitor’s screen, in pixels, minus interface features such as window toolbars
  5. screen.colorDepthReturns the number of bits used to display a color
  6. screen.pixelDepthReturns the pixel depth of the screen. For modern computers, color depth and pixel depth are equal.

document

Represents the current page, and since HTML is represented in the browser as a DOM tree structure, the Document object is the entire DOM root node

  • Document object attribute is a bit more, so this way will not explain too much, you can look at the official documentation www.w3school.com.cn/js/js_htmld…
  • But here’s an important introductiondocument.cookies: Returns the cookies that read the current page

A Cookie is a key-value identifier sent by the server. Because HTTP protocol is stateless, but the server to distinguish which user sent the request, can use cookies to distinguish. When a user successfully logs in, the server sends a Cookie to the browser, such as user=ABC123XYZ(encrypted string)… After that, when the browser visits the website, it will attach the Cookie in the request header, and the server can distinguish users according to the Cookie.

  • Because JavaScript can read the cookies of the page, and the user’s login information is usually also stored in the cookies, this causes a huge security risk, because it is allowed to introduce third-party JavaScript code into the HTML page; If there is malicious code in the JavaScript of the imported third party, www.foo.com will directly obtain the user login information of www.example.com.
  • HttpOnly: Cookies of the httpOnly type cannot be read by JS. The entire behavior is browser-controlled, and the main browsers now support the httpOnly option. To ensure security, the server side should always insist on setting the httpOnly option when setting cookies