HTML BOM Browser Object

BOM: Browser object model, the browser object models, provides a content-independent object structure that can interact with the browser window.

Browser Object : Refers to the BOM provided by a number of objects, including: Window, Navigator, screen, history, location and so on.

Where the Window object is the top-level object, and the other objects are child objects of the Window object.

Directory

1. Window object: Indicates that the browser is open, including getting focus, changing scroll bar, setting timer, and so on.

2. Navigator object: Contains browser information. such as: Get browser name, version information, operating system platform information, and so on.

3. Screen object: contains onscreen information. such as: Get screen height, width and so on.

4. History object: Can be used to the current page of the browser to operate, such as: forward, backward and so on.

5. Location object: You can manipulate the URL of the current page, such as: Navigate to a new page, get URL information, and so on.

1. Window Object 1.1 Description

Window object: Indicates that the browser is open with Windows, tags, or frames (if the current page contains multiple iframe, a Window object is created for each IFRAME).

The Window object is not instantiated, and the call properties and methods are all static members of the window.

Call method : When you call a member of the Window object, you can omit the previous window. such as: Window.alert () can be written as alert ().

1.2 Properties

ReadOnly Applicationcache Applicationcache : Returns the application cache object for the window.

ReadOnly boolean closed : Returns whether the window has been closed.

ReadOnly console console: Returns a reference to the Consol object and operates on the browser console.

readonly int devicepixelratio : Returns the device pixel ratio, which is the physical pixel of the current display and the device independent pixel (DIP) ratio.

ReadOnly Document Document : Returns the Document object for the current window.

ReadOnly Element frameelement : If the current window is in a <iframe>, this property returns the IFRAME. Returns null if in the top-level window.

ReadOnly window[] frames : Returns an array that contains all the frames within the window.

ReadOnly history : Returns a History object. The history of the current page can be manipulated, such as: forward, backward and so on.

ReadOnly long innerheight : Returns the current window to display the height of the HTML document, in px (pixels).

ReadOnly long innerwidth : Returns the current window to display the width of the HTML document, in px (pixels).

ReadOnly long length : Returns the number of frames contained within the window, that is, the number of frames.

ReadOnly location : Returns a Location object. You can manipulate the URL of the current page, such as navigating to a new page, getting URL information, and so on.

ReadOnly localstorage localstorage : Returns a key/value pair of stored storage objects that persist until deleted by the user.

String name : Sets or gets the name of the current window.

ReadOnly Navigator Navigator : Returns a Navigator object. contains browser information. such as: Get browser name, version information, operating system platform information, and so on.

Window Openner : Returns a reference to the original window that opens the current window. If the current window is opened by another window, Window.opener retains a reference to that window. If the current window is not open by another window, the property returns NULL.

ReadOnly long outerheight : Returns the total height of the current browser, in px (pixels). Contains a range of toolbars, scrollbars, browser borders, and so on.

ReadOnly long outerwidth : Returns the total width of the current browser, in px (pixels). Contains a range of toolbars, scrollbars, browser borders, and so on.

ReadOnly long Pagexoffset : Returns the distance that the document is scrolled horizontally, in px (pixels).

ReadOnly long pageYOffset : Returns the distance, in px (pixels), of the document's longitudinal scrolling.

ReadOnly window Parent: Returns the current window. If the current window is a top-level window, returns the current window itself. If the current window is a frame window, it returns its parent window.

ReadOnly screen : Returns a Screen object. Contains screen information. such as: Get screen height, width and so on.

ReadOnly long ScreenX : Returns the x-coordinate of the browser on the screen.

ReadOnly long ScreenY : Returns the y-coordinate of the browser on the screen.

ReadOnly long SCROLLX : Returns the distance that the document is scrolled horizontally, in px (pixels). Same as the Pagexoffset property.

ReadOnly long scrolly : Returns the distance, in px (pixels), of the document's longitudinal scrolling. Same as the pageYOffset property.

readonly window self: Returns a reference to the current Window object.

ReadOnly sessionstorage sessionstorage : Returns a key/value pair stored storage object that continues until the end of the current browsing session.

readonly window Top : Returns the top-level windows of the current window. If the current window itself is already top-level, it returns itself. If the current window is a frame window, returns the top-level window that contains it (the parent simply returns to the parents window).

readonly window window: Returns the Windows object.

1.3 Methods

void AddEventListener(String eventtype,function EventListener): Registers an event with the window. EventType event type, such as: click. EventListener: An event-triggered function or object.

void alert(String msg): pops up a warning box containing MSG and a confirmation button.

String Atob(String base64str): Decodes a Base64-encoded string into a string.

void Blur(): Removes focus from the current window.

String btoa(String str): Encodes a string as a Base64 encoding.

void clearinterval(Long Intervalhandle): Stops intervalhandle the specified setinterval ().

void cleartimeout(Long Timeouthandle): Stops timeouthandle the specified settimeout ().

void Close(): Closes the current window. You can only close a window opened by a script, such as: A element opens a new page.

Boolean confirm(String msg): Displays a dialog box with a message along with a confirmation button and a Cancel button. Click the Confirm button to return True and click the Cancel button to return false.

void Focus(): The current window gets focus.

void Moveby(Long deltax, long DeltaY): Causes the Open () method to create a window that, at its own position, moves deltax pixels horizontally, moving vertically deltay pixels.

void MoveTo(long x, long y): causes the window created by the open () method to move to the x, Y coordinates.

Window open(string URL, string target, string features, String replace): Creates a new window.

parameter: ①url {string}: A new window loaded URL. If not specified, "about:blank"will be used. ②target {string}  : Name of the new window. If not specified, "_black"will be used. Note This value is not a window caption. ③features {string} Optional: Represents the properties of a new window, such as: Window functions and toolbars. The string cannot contain any whitespace characters, and the attributes are separated by commas. Return value: {window} returns a reference to a new window. 

Method Details

void print (): invokes the browser's Print button.

String prompt(string msg): pops up an input box that displays MSG information and includes a OK button and a Cancel button. This input box blocks the page, clicks the OK button to return the input, and then clicks the Cancel button to return null.

void Resizeby(Long deltawidth, long deltaheight): Causes the Open () method to create a window, in its own position, to increase the width of deltawidth pixels, Increase the height of deltaheight pixels.

void Resizeto(long width, long height): The window created by the open () method becomes width and height becomes height.

void Scrollby(Long deltawidth, long deltaheight): Scrolls horizontally deltawidth pixels, scrolling vertically deltaheight pixels, based on the current scrolling.

void ScrollTo(long width, long height): Scrolls horizontally across the width pixel distance, scrolling vertically to height pixel distance.

Long setinterval(function fn, long time): Executes the specified function every interval (in milliseconds).

parameters: ①fn {function}: functions that need to be executed. ②time {long}: Sets the specified function to execute every number of milliseconds. Units: milliseconds. Return value: {long} returns a number. You can cancel the execution of this function by calling Window.clearinterval ().

Method Details

Long setTimeout(function fn, long time): Executes the pointing function after a certain number of milliseconds.

parameters: ①fn {function}: functions that need to be executed. ②time {long}: Sets the number of milliseconds after which the specified function executes. Units: milliseconds. Return value: {long} returns a number. You can cancel the execution of this function by calling Window.cleartimeout ().

Method Details

2.Navigator Object 2.1 Description

Navigator object: Contains browser information. such as: Get browser name, version information, operating system platform information, and so on.

Call mode : Window.navigator or navigator.

2.2 Properties

ReadOnly string appName : Returns the name of the browser. In a Netscape-based browser, the return is "Netscape". In IE, the return value is "Microsoft Internet Explorer".

ReadOnly string appversion : Returns the browser version and platform information. For example, a Chrome version returns "5.0 (Windows NT 6.1) applewebkit/537.36 (khtml, like Gecko) chrome/43.0.2357.134 safari/537.36".

ReadOnly geolocation geolocation : Returns a Geolocation object to obtain the current geographic information.

ReadOnly string language : Returns the browser interface language. Simplified Chinese return: "ZH-CN".

ReadOnly boolean OnLine : Returns whether the browser can connect to the network.

ReadOnly string platform : Returns the system platform on which the browser resides. such as: Win32.

ReadOnly string useragent : Returns the value of the user-agent header of the server sent by the client. such as: "mozilla/5.0 (Windows NT 6.1) applewebkit/537.36 (khtml, like Gecko) chrome/43.0.2357.134 safari/537.36".

ReadOnly serviceworker Serviceworker : Returns the Serviceworker object. Serviceworker a script running in the background of a browser that provides additional functionality without a Web page or user interaction.

2.2 Methods

Boolean javaenabled(): Returns whether the browser is Java-enabled.

3. Screen Object 3.1 Introduction

Screen object: contains onscreen information. such as: Get screen height, width and so on.

Call mode : Window.screen or screen.

3.2 Properties

ReadOnly long availheight : Returns the available height of the browser on the screen, in px (pixels). Can be understood as the maximum height of the browser, generally minus the upper and lower system taskbar or docking bar for screen height.

ReadOnly long availwidth : Returns the available width of the browser on the screen, in pixels per px (pixel). Can be understood to maximize the width of the browser, usually the screen width minus the left and right system taskbar or docking bar.

ReadOnly long colordepth : Returns the color depth of the screen. The color depth is simply the maximum number of colors supported. It is generally described by "bit". For example, BMP format, you can support up to 256 kinds of red, green, blue, a total of 24 bits. So the color depth is 24.

ReadOnly Long Height : Returns the height of the screen, in px (pixels).

ReadOnly long pixeldepth : Returns the color depth of the screen.

Color depth The field of computer graphics represents the number of bits used to store 1 pixels of color in a bitmap or video frame buffer, also known as a bit/ pixel (BPP). The higher the color depth, the more colors are available. The color depth is illustrated by the "N-bit Color" (n-bitcolour). If the color depth is n bits, there are 2^n color choices, and the number of bits used to store each pixel is n. For example: 24-bit:777, 216 colors, True color, can provide more than the naked eye can recognize more colors, used to take pictures.

attribute Details

ReadOnly Long width : Returns the width of the screen, in px (pixels).

4. History Object 4.1 Description

History object: You can manipulate the current page's browsing histories, such as: forward, backward, and so on. However, you cannot know which URLs were browsed.

Call mode : Window.history or history.

4.2 Properties

ReadOnly long length : Returns the number of URLs in the browser history list.

4.3 methods

void back (): The currently owned window accesses the last visited URL. The "Back" button, equivalent to the browser, is also equivalent to History.go (-1).

void forward(): The currently owned window accesses the next visited URL. The "Forward" button, equivalent to the browser, is also equivalent to History.go (1).

void go(int index): Causes the current window to access the specified URL that has been visited. The URL that the current window has accessed is an array. A positive number indicates the forward index (click the Forward button index), and a negative number indicates the back index (click the Back button index).

5. Location Object 5.1 Description

Location Object: You can manipulate the URL of the current page, such as navigating to a new page, getting URL information, and so on.

Call mode : Window.location or location.

5.2 Properties

String hash : Sets or returns the anchor part of the current page URL, containing the # symbol at the beginning.

//

attribute Details

String host : Sets or returns the host name and port of the current page URL.

// page address: http://wenku.baidu.com:80/view/abc // = = Return ' wenku.baidu.com:80 ' // will let the current window access HTTP://WWW.BAIDU.COM/VIEW/ABC

attribute Details

String hostname : Sets or returns the host name of the current page URL.

// page address: http://wenku.baidu.com:80/view/abc // = = Return ' wenku.baidu.com ' // will let the current window access HTTP://WWW.BAIDU.COM:80/VIEW/ABC

attribute Details

string href : Sets or returns the full URL of the current page. If no protocol is set, the string set only changes after the last '/' of the URL.

// page address: http://wenku.baidu.com:80/view/abc // = = Return ' HTTP://WENKU.BAIDU.COM:80/VIEW/ABC ' // without protocol, the current window will be accessed http://wenku.baidu.com:80/view/www.baidu.com // will let the current window access http://www.baidu.com

attribute Details

String pathname : Sets or returns the path portion of the current page URL.

// page address: http://wenku.baidu.com:80/view/abc // = = Return '/VIEW/ABC ' // Modifying the value of the path causes the current window to access the http://wenku.baidu.com:80/a.html

attribute Details

String port: Sets or returns the port of the current page URL. If the current URL does not have a port, return a "(empty string).

String protocol : Sets or returns the protocol for the current page URL, with a ': ' Colon in the last face.

// page address: http://www.baidu.com // = = Returns ' http: ' // will let the current window access https://www.baidu.com

attribute Details

String Search : Sets or returns the query portion of the current page URL (the URL starting from the question mark (?)).

// page address: http://www.baidu.com?id=1&page=1 // = = Return '? id=1&page=1 ' // will let the current window access http://www.baidu.com?id=1&page=1 // omit '? ' Hello, will let the current window access http://www.baidu.com?id=1

attribute Details

ReadOnly string Origin : Returns the source of the current page URL. Return format: Protocol + hostname + port; For example: https://www.baidu.com

5.3 Methods

void assign(string URL): Sets the current page load for the specified URL, equivalent to setting the value of the href attribute to the URL.

void Reload(): Reloads the URL of the current page. Can be seen as a refresh operation.

void replace(string URL): Sets the current page to load the specified URL and replaces the current address in the browser history, and the back operation does not display the currently accessed record.

if A and B pages have been accessed sequentially. on page B, enter: Location.replace (//  visit C page. This page loads the C page. Clicking the "Bounce" button in your browser will return to page A.

Detailed Method

================================== Series article ==========================================

This article: 4.1 HTML BOM Browser Object

Web Development Road Series articles

HTML BOM Browser Object