Browser Object Model (BOM)

The Browser Object Model (BOM) allows JavaScript to talk to the Browser.

There is no official standard for the Browser Object Model (BOM). Modern browsers already implement (almost) the same methods and properties for JavaScript interaction, so it is often referred to as methods and properties of the BOM.

The window object

The Window object is the primary access point for all client-side JavaScript features and apis. It represents a window or form of the Web browser and can be referenced with the Window identifier. It is the global object of the client-side JavaScript program. There are many properties and methods on the Window object, but only some of them are actually related to the browser Window.

The timer

SetTimeout () and setInterval() can be used to register functions that are called once or repeatedly after the specified event.

  • The setTimeout() method of the Window object is used to implement a function to run after a specified number of milliseconds. SetTimeout () returns a value that is passed to clearTimeout() to cancel the function.

  • SetInterval () is the same as setTimeout(), except that it is called repeatedly for a specified number of milliseconds:

      setInterval(updateClock, 60000); // Call updateClock() every 60 seconds
Copy the code

Like setTimeout(), setInterval() returns a value that can be passed to clearInterval() to cancel subsequent function calls.

The HTML5 specification (all browsers except Internet Explorer) also allows setTimeout() and setInterval() to pass in additional parameters and pass them in when a function is called. If you need to support IE, do not apply the sub-feature.

If setTimeout() is called with a 0 millisecond timeout event, the specified function will not execute immediately. Instead, it is put on a queue and invoked immediately after the previous event handler in the wait state completes execution.

SetInterval () If the value of the delay parameter is less than 10, the default value is 10.

Browser location and navigation

The Location property of the Window object refers to the Location object, which represents the URL of the document currently displayed in the Window, and defines methods to make the Window load new documents.

Parsing the URL

The Location object represents the URL of the document currently displayed in the window. The href attribute of the Location object is a string containing the full text of the URL. The toString() method of the Location object returns the value of the href attribute, so location.tostring () can be used instead of location.href in cases where toString() is implicitly called

Protocol, host, hostname, port, PathName, and search, which represent each part of the URL.

  / / assume the location. The href http://127.0.0.1:5500/index.html? name=a
  
  location.protocol // protocol returns "HTTP :"

  location.host // Domain name + port number returns "127.0.0.1:5500"

  location.hostname // Domain name returns "127.0.0.1"

  location.port // The port number returns "5500"

  location.pathname // Path returns "/index.html"

  location.search // Query string returns "? name=a"

Copy the code

The hash and search properties of the Location object are interesting; the hash property returns the “fragment identifier” part of the URL, if any; the search property returns the question mark and the URL after it. In general, this section is used to parameterize the URL and embed parameters in it.

A custom function, urlArgs(), extracts the parameter from the search property of the URL.

  function urlArgs() {
    var args = {};
    var query = location.search.substring(1);
    var pairs = query.split("&");
    for (var i = 0; i < pairs.length; i++) {
      var pos = pairs[i].indexof("=");
      var name = pairs[i].substring(0,pos);
      var value = pairs[i].substring(pos+1);
      value = decodeURIComponent(value);
      args[name] = value;
    } 
    return args;
  }
Copy the code

Loading a new document

The Assign () method of the Location object causes the window to load and display the document from the URL you specified. The replace() method is similar, but it removes the current document from the browser’s history before loading the new one.

The reload() method of the Location object lets the browser reload the current document.

A more traditional way to jump to a page is by assigning location:

Location = “http://www.baidu.com” load baidu

Location = “page2.html” loads page2.html relative to the current URL

Location = “#top” It doesn’t tell the browser to load a new document, it just scrolls it to some point in the document (like an anchor link). The #top identifier is a special example: it tells the browser to jump to the beginning of the document if there are no elements in the document whose ID is “top”.

Browsing history

The history property of the Window object refers to the Window’s history object. The History object is used to represent the browsing History of a window in the form of documents and a list of documents. The length attribute of the History object represents the number of elements in the browsing History table, but for security reasons, the script cannot access the saved URL.

The back() and forward() methods of the History object are the same as the browser’s back and forward buttons: they cause the browser to jump forward or backward one space in the History. The go() method takes an integer argument and can move forward(positive argument) or backward (negative argument) in the History list. Skip any number of pages.

History.go (-2) is equivalent to clicking the Back button twice

The Navigator object

The Navigator property of the Window object refers to the Navigator object that contains the browser manufacturer and version information.

  • The appName property, which represents the full name of the browser such as “Netscape”.

  • The appVersion property, which represents a detailed string of browser vendor and version information.

  • The userAgent property, a string that the browser sends in its User-Agent HTTP header. Contains all information about appVersion.

  • The platform property represents the operating system on which the browser is running.

The Screen object

The Screen property of the Window object refers to the Screen object. It provides information about the size of the window screen display and the number of colors available. The width and height properties specify the window size in pixels. The attributes availWidth and availHeight specify the actual available display size. The colorDepth attribute specifies the bits-per-pixel (BPP) value to display. Typical values are 16, 24, and 32.

dialog

The Window object provides three methods to display a simple dialog box to the user.

  1. Alert () displays a message to the user and waits for the user to close the dialog.
  2. Confirm () also displays a message asking the user to click OK or cancel and return a Boolean value.
  3. Prompt () also displays a message, waits for the user to enter a string, and returns that string.

The text displayed in these dialogs is plain text, not HTML text

Alert (), confirm(), and prompt() all block and, if the document is being loaded, stop loading until the user responds with the requested input.