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.
- window
- history
- location
- navigter
- screen
- 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 windowwindow.close()
– Close the current windowwindow.moveTo()
– Moves the current windowwindow.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
history.forword()
- Jump forward one page
history.back()
- Jump backwards to a page
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.
hash
- Sets or returns the URL (anchor) starting with the hash sign (#).
host
- Sets or returns the hostname and port number of the current URL.
hostname
- Sets or returns the host name (domain name) of the current URL.
href
- Sets or returns the full URL.
pathname
- Sets or returns the path portion of the current URL.
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).
protocol
- Sets or returns the protocol for the current URL.
earch
- Sets or returns from question mark (?) The starting URL (query section).
navigter
navigator.appName
: Browser name; Note: “Netscape” is the name of the application for Internet Explorer 11, Chrome, Firefox, and Safari.navigator.appVersion
: Browser version;navigator.appCodeName
: Returns the application code name of the browsernavigator.language
: language for setting the browser;navigator.platform
: Operating system type.navigator.userAgent
: User-agent character string set by the browser.navigator.cookieEnabled
: returns true if cookies are enabled, false otherwise.navigator.product
: Returns the product name of the browser enginenavigator.platform
Return to the browser platform (operating system)navigator.onLine
The: property returns true if the browser is onlinenavigator.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
screen.width
Returns the visitor’s screen width in pixelsscreen.height
Returns the height of the visitor’s screen in pixelsscreen.availWidth
Returns the width of the visitor’s screen, in pixels, minus interface features such as window toolbarsscreen.availHeight
Returns the height of the visitor’s screen, in pixels, minus interface features such as window toolbarsscreen.colorDepth
Returns the number of bits used to display a colorscreen.pixelDepth
Returns 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 introduction
document.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