This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

One of the most important environments for JavaScript to run in is the Browser, and the Browser itself as an application needs to operate on itself, so the Browser usually has a BOM (Browser Object Model).

A BOM is a list of objects that a browser provides that can be manipulated with JS,

These BOM objects encapsulate a set of properties and methods that can manipulate browsers. We can use JS to manipulate the properties and methods on BOM objects

We can think of the BOM as a bridge between a JavaScript script and a browser window.

The BOM consists of the following object models:

  • Window: includes global properties and methods that control browser window-related properties and methods
  • Location: The location (URL) of the object to which the browser is connected
  • History: indicates the history of browser operations
  • Document: The object on which the current window manipulates the document (DOM)

window

The window object has two identities in the browser:

  • Global object
    • ECMAScript actually has a global object, which is global in Node and Window in browser
    • In the browser, the Window object is the global object that we talked about a lot earlier, the GO object
  • Browser window object
    • As a browser window, it provides apis for browser operations

Common properties and methods

// The distance between the browser and the left and top of the screen
console.log(screenX, screenY)

// Width and height of the browser
console.log(outerWidth, outerHeight)

// Width and height of viewport
console.log(innerWidth, innerHeight)

// How far does the scroll bar roll to the right or down
console.log(scrollX, scrollY)
Copy the code
// Close the window
// close()

// Open a new window
// By default, the second parameter is _blank
open('http://www.google.com'.'_self')
Copy the code
// Scroll some distance
// Scroll to (x,y)
scrollTo(x, y)

scrollTo({
  top: 1000.left: 500.behavior: 'smooth'
})
Copy the code
// Move down 100px, move right 100px
scrollBy(100.100)

scrollBy({
  top: 1000.left: 500.behavior: 'smooth'
})
Copy the code
window.onload = function() {
  console.log("Window window loading completed ~")}window.onfocus = function() {
  console.log("Window window gets focus ~")}window.onblur = function() {
  console.log("Window window loses focus ~")}window.onhashchange = function() {
  console.log("Hash has changed.")}Copy the code

The Window object is created from the Window class, which inherits from the EventTarget class

EventTarget class has three methods, the addEventListener, removeEventListener, dispatchEvent

So these three methods can also be used on the Window object

const clickHandler = () = > console.log('clicked')
addEventListener('click', clickHandler)
removeEventListener('click', clickHandler)
Copy the code
addEventListener('customEvent'.() = > console.log('custom event'))

// The parameter to dispatchEvent needs to be an event instance object
dispatchEvent(new Event('customEvent'))
Copy the code

location

The attributes of location are as follows:

  • Href: the URL of the hyperlink corresponding to the current window. Pprotocol: indicates the current protocol.
  • Host: indicates the IP address of a host.
  • Hostname: indicates the host address (without the port).
  • Port: the port;
  • The pathname: path;
  • Search: query string.
  • Hash: a hash value;
  • Username: username in the URL (disabled in many browsers);
  • Password: the password in the URL (disabled in many browsers)

A complete URL is represented in the following format:

location.assign('http://www.google.com')
/ / equivalent to the
location.href="http://www.google.com"
Copy the code
// No history is generated
location.replace('http://www.google.com')
Copy the code
// Refresh interface parameters can be passed a Boolean value
// The default is false
// Can be set to true -- force refresh
location.reload()
Copy the code

history

The History object allows us to access the browser’s past session history

// Output browser record debugging - the number of records in the session
console.log(history.length)

// The current reserved state value
console.log(history.state)

// return to the previous page, equivalent to history.go(-1)
history.back()

// proceed to the next page, equivalent to history.go(1)
history.forward()

// Load a page in history
history.go(1)
history.go(-1)

// Open a specified address -- no browser refresh
// Parameter 1, the state value that needs to be passed between two routes
// When switching routes, you can change the title of the page. Most browsers forbid this, so you can pass an empty string
// Parameter 3, the route to the new address, can be a relative route or an absolute path to the address (but must be cognate)
history.pushState({}, ' '.'/detail')

// Open a new address and use replace -- no browser refresh
PushState is set to pushState
history.replaceState({}, ' '.'/detail')
Copy the code