Browser object Model

What is the Browser object Model

• BOM ：Browser Object Model(Browser Object Model), the browser model provides a content-independent object structure that slides with the browser window, which is the browser-provided API
• The main objects are as follows: 1. Window object — the core of BOM, which is the interface for JS to access the browser, as well as the Global object specified by ES. 2. Location object: provides information about the document loaded in the current window and some navigation functions. 4. Screen object: used to represent the display information outside the browser window. 5. Hitory object: saves the historical information of the user’s Internet access

The Window object

Windows objects are the core of the browser object model, acting as both interfaces and global objects

• Properties and methods of the window object

attribute	instructions
alert()	System warning dialog box to receive string parameters and display
confirm()	System confirmation dialog box, you can confirm or cancel two events
prompt()	Prompt dialog box, can show the user to confirm, cancel events, but also provide a text field
open()	You can navigate to a specific URL and open a new browser windowWindow.open (the URL to load, the window target, a particular string, whether a new page replaces the current loaded page in the browser history)
onerror()	The event handler, which is called when an uncaught exception is propagated on the call stack, prints the error message to the browser’s JavaScript control.Window.onerror (a message describing the error, string -- the url of the document that contains the JavaScript code that caused the error, and the number of lines in the document where the error occurred)
setTimeout()	Timeout call – Executes code after a specified time has passedwindow.setTimeout(function(){... }, ms)
setInterval()	Intermittent calls – at specified intervalswindow.setInterval(function(){... }, ms)

• Application Scenario Application scenario: 1. Confirm the window location and size. Obtain the properties and methods of the window location

attribute	instructions	compatibility
screenLeft	Window relative to screenOn the leftThe location of the	Applicable to Internet Explorer, Safari, and Chrome
screenTop	Window relative to screenaboveThe location of the	Applicable to Internet Explorer, Safari, and Chrome
screenX	Window relative to screenOn the leftThe location of the	Apply to Firefox
screenY	Window relative to screenaboveThe location of the	Apply to Firefox
moveBy(x,y)	It receives the number of pixels moving in horizontal and vertical directions	Fully compatible with
moveTo(x,y)	It receives the x and y coordinates of the new position	Fully compatible with

Gets the left and top positions of the window across browsers

var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX

var topPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY  
Copy the code

Window size properties and methods

attribute	instructions
innerWidth innerHeight	IE9+, Safari, Firefox, Opera:The size of the page view area in the containerChrome:Returns the viewport sizeMobile devices:Returns the viewport (that is, the size of the visible page area on the screen)Mobile Internet Explorer:This property is not supported when mobile Internet Explorer saves the layout viewport information todocument.body.clientWidthwithdocument.body.clientHeightIn the
outerWidth outerHeight	IE9+, Safari, Firefox:Returns the size of the browser window itselfOpera:Returns the size of the page view containerChrome:Returns the viewport size
resizeTo(width, height)	Receives the new width and height of the browser window
resizeBy(width, height)	The difference in width and height between the new window and the original window

2. Navigate and open Windows

attribute	instructions
open(url,[target,string,boolean])	url:The URL to load,target:Window targetstring:A comma-delimited string representing the features displayed in the new windowboolean:Indicates whether the new page replaces the Boolean value of the currently loaded page in the browser history

3. Timers setTimeout() and setInterval() are both generated by the language characteristics of JavaScript. As JavaScript is a single-threaded interpreter, only one code can be executed within a certain period of time. You have a JavaScript queue. The tasks are executed in the order they were added to the queue. The second parameter of setTimeout() and setInterval() tells JavaScript how long to add the current task to the queue. If the queue is empty, the added code executes immediately; If the queue is not empty, it waits until the previous code has finished executing. Both of them, when called, return a numeric ID that can be used to cancel the call to the method. Here’s the code for the countdown

<! Var num = 10 var interval = setInterval(function(){num -- console.log(num) if(num == 0) { clearInterval(interval) console.log('Done') } }, 1000) <! Var num = 10 var timeout = function(){num-- console.log(num) if(num > 0){num-- console.log(num) if(num > 0){ SetTimeout (timeout,1000)}else {console.log('Done')}} setTimeout(timeout,1000) However, using 'setInterval()' will continue until the page is uninstalled without intervention, so 'serInterval()' usually consumes performance. The 'setTimeout()' method can then perform intermittent calls by calling itself. Therefore, 'setTimeout()' is generally used for timeout and intermittent calls.Copy the code

Location object

Provides information about the loaded document in the current window and some navigation capabilities. It is both a window object property and a Document object property

window.location === document.location //true
Copy the code

Location also parses the URL into separate fragments, which can be accessed through the attributes of location

• The main properties of the location object are:

The property name	example	instructions
hash	” #host “	Return hash in url (# after character >=0)
host	” juejin.im:80 “	Server name + port (if any)
hostname	” juejin.im “	Contains only the server name
href	” Juejin. Cn/book / 5 a7bfe… “	The full URL of the currently loaded page
pathname	” /book/5a7bfe595188257a7349b52a “	Returns the directory and/or filename of the URL
port	“8080”	The port number of the URL, null if it does not exist
protocol	” https: (or http:)/)”	Protocol used by the page
search	” ?name=aha&age=20 “	Returns a query string for the URL, starting with a question mark

• 1, parse the URL query string parameters, and return it to an object, can be achieved through the loop, the re, there are many methods, the general idea of implementation is: throughlocationthesearchProperty to obtain the parameters passed by the current URL, if there is a query string in the URL, the question mark is cut off, and then iterated through the string inside with equal sign as a breakpointdecodeURIComponent()Method to parse the specific value of its argument, place it in the object container, and return it.
  • The assign () : Location. assign(“www.xxx.com”) immediately opens the new URL and creates a new record in the browser’s history. In a page that already has five browser history records, use the assign() command to jump to the URL, leaving only two history records. One page is assigned, the other is the previous page (the one using the assign() jump method), and all the rest are cleared
  • Replace (): location.replace(“www.bbb.com”) only takes a URL. The url interface to which you jump to does not generate a history in the browser, that is, the length of history does not +1, but replaces the current page
  • reload():This is used to reload the currently displayed page. When no arguments are passed, if the page has not changed since the last request, the page will be reloaded from the browser if passedtrue, forces a reload from the server

Navigation object

The Navigation interface represents the status and identity of the user agent, allowing the script to query it and register itself for some activities

• Property method of the navigation object

• Navigation Application Scenario
  • Detection of plug-in
  • Registration handler

The Screen object

This provides information about the size of the window display and the color input available.

• Properties and methods of the Screen object

The History object

The history object holds a history of the user’s Internet access from the moment the window was opened. The history object is represented by the window’s browsing history in the form of documents and a list of document states. The length attribute of the history object represents the number of elements in the browse history list, but for security reasons, the script cannot access the saved URL

• Properties and methods of the History object

attribute	instructions
go()	1, to jump to the user’s history at will,go(n)N pages forward,go(-n)(n>0) 2,go()You can pass in a string argument, and if the browser has this URL in its history it will jump to the first location that contains the string, otherwise nothing, okay
back()	A back page
forword()	On a page
length	The number of saved history records that can be used to detect whether the current page is the first page of the user’s history(history.length === 0)