This is the 7th day of my participation in Gwen Challenge

introduce

BOM (Browser Object Model), translated into Chinese, is the core of developing Web applications using JavaScript. The BOM provides browser functionality objects that are unrelated to web pages. There is no fixed specification for the BOM, and browser developers add to it as they wish. Eventually, what is common between browser implementations becomes a de facto standard, providing the basis for interbrowser operations for Web development.

window

The Window object is the core of BOM and the topmost object of JS. Other BOM objects are the properties of the Window object. All variables and functions defined in the global scope are the properties and methods of the Window object. The Window object is not only an interface to access the browser through JavaScript, but also a Global object defined by ECMAScript.

Window object common methods:

  • window.onload()Window loading event
  • window.onresize()Jump window size event

location

Location is one of the most useful BOM objects, providing information about the loaded document in the current window, as well as general navigation. This object is unique in that it is both a window property and a Document property. That is, window.location and document.location refer to the same object. The Location object not only holds information about the currently loaded document, but also information that can be accessed through properties after the URL is resolved into discrete fragments.

Location properties and methods:

  • location.hrefGets or sets the entire URL
  • location.hostReturn host name (domain name)
  • location.portReturn port number if not writtenAn empty string
  • location.pathnameReturns the path
  • location.searchReturns the parameter
  • location.hashReturn fragment # The following content is common in links, anchor points
  • location.assign()Like href, you can jump to a page (also known as a redirect page)
  • location.replace()Replace the current page, because no history is recorded, so cannot be backward
  • location.reload()Reload the page, equivalent to refresh button or f5 Force refresh Ctrl + F5 if true

navigator

Navigator was first introduced to the browser by Netscape Navigator 2 and has become the standard for clients to identify browsers. As long as JavaScript is enabled in the browser, the Navigator object always exists. But like any BOM object, each browser adds to it as it wishes.

Navigator properties and methods:

  • activeVrDisplaysReturns an array containing VRDisplay instances with ispresenting property true
  • appCodeNameIn non-Mozilla browsers it will return “Mozilla”
  • appNameBrowser full name
  • appVersionBrowser version, which is usually different from the actual browser version
  • batteryReturns the BatteryManager object that exposes the Battery Status API
  • buildIdThe build number of the browser
  • connectionReturns the NetworkInformation object that exposes the NetworkInformation API
  • cookieEnabledReturns a Boolean value indicating whether cookies are enabled
  • credentialsReturns the CredentialsContainer object that exposes the Credentials Management API
  • deviceMemoryReturns the device memory capacity in GB
  • doNotTrackReturns the user’s do-not-track Settings
  • geolocationReturns a Geolocation object that exposes the Geolocation API
  • getVRDisplays()Returns an array containing each available instance of VRDisplay
  • getUserMedia()Returns the stream associated with the available media device hardware
  • hardwareConcurrencyReturns the number of processor cores for the device
  • javaEnabledReturns a Boolean value indicating whether the browser is Java enabled
  • languageReturns the browser’s main language
  • languagesReturns an array of browser preferred languages
  • locksReturn the LockManager object that exposes the Web Locks API
  • mediaCapabilitiesReturns the MediaCapabilities object that exposes the MediaCapabilities API
  • mediaDevicesReturns the available media devices
  • maxTouchPointsReturns the maximum number of touch points supported by the touch screen
  • mimeTypesReturns an array of MIME types registered in the browser
  • onLineReturns a Boolean value indicating whether the browser is networked
  • oscpuReturns the operating system and/or CPU on which the browser runs the device
  • permissionsReturns the Permissions object that exposes the Permissions API
  • platformReturn to the system platform on which the browser is running
  • pluginsReturns an array of browser installed plug-ins. In IE, this array contains all the elements in the page
  • productReturn product name (usually “Gecko”)
  • productSubReturn additional information about the product (usually Gecko’s version)
  • registerProtocolHandler()Registers a web site as a handler for a specific protocol
  • requestMediaKeySystemAccess()Returns a term, resolved as a MediaKeySystemAccess object
  • sendBeacon()Asynchronously transfer small data
  • serviceWorkerReturns the ServiceWorkerContainer used to interact with the ServiceWorker instance
  • share()Returns the native sharing mechanism for the current platform
  • storageReturns the StorageManager object that exposes the Storage API
  • userAgentReturns the user agent string for the browser
  • vendorReturns the browser vendor name
  • vendorSubReturns more information about the browser vendor
  • vibrate()Trigger device vibration
  • webdriverReturns whether the browser is currently controlled by an automation program

screen

Screen is also a window property, and is one of the few JavaScript objects rarely used in programming. What is stored in this object is purely client capability information, that is, information about the client display outside the browser window, such as pixel width and pixel height. Each browser exposes different properties on screen objects.

Screen has the following properties:

  • availHeightScreen pixel height minus System component height (read only)
  • availLeftLeftmost pixel of the screen not occupied by system components (read only)
  • availTopTop pixel of the screen not occupied by system components (read only)
  • availWidthScreen pixel width minus system component width (read only)
  • colorDepthNumber of bits representing screen color; Most systems are 32 (read only)
  • heightScreen pixel height
  • leftThe pixel distance to the left of the current screen
  • pixelDepthBit depth of the screen (read only)
  • topThe pixel distance at the top of the current screen
  • widthScreen pixel width
  • orientationReturns the Orientation of the Screen in the Screen Orientation API

history

The history object represents the navigation history of the user since the current window was first used. Because History is the property of a window, each window has its own History object. For security reasons, this object does not expose urls that the user has visited, but it allows you to move forward and backward without knowing the actual URL.

History method:

  • back()You can go back
  • forward()Forward function
  • The go (parameters)If the forward and backward function parameter is 1, advance one page; If the argument is -1, back up one page