Front-End Basics: JavaScript BOM Objects

JavaScript BOM object JavaScript Window-Browser object model

The browser object Model (BOM) gives JavaScript the ability to "talk" to the browser.
Browser object Model (BOM)
There is no formal standard for the browser object model (Browser object Model:bom), which is often considered a BOM method and property because modern browsers have implemented the same methods and properties for JavaScript interactivity.

Window object
All Browsers support window objects, which represent browser windows. All JavaScript global objects, functions, and variables are automatically referred to as members of the Window object. A global variable is a property of a Window object, the global function is a method of the Window object, and even the document of the HTML DOM is one of the properties of the Window object:

window.document.getElementById("header");

The same as this:

document.getElementById("header");

Window size
There are three ways to determine the size of the browser window, for IE, Chrome, FireFox, opera statement safari:

• Window.innerheight: Internal height of the browser window (including scroll bars)
• Window.innerwidth: Internal width of the browser window (including scroll bars)

For IE8, 7, 6, 5:

• Document.documentElement.clientHeight
• Document.documentElemetn.clientWidth

Or

• Document.body.clientHeight
• Document.body.clientWidth

Practical JavaScript scenarios (all browsers included):

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Other Window methods

window.open() - 打开新窗口window.close() - 关闭当前窗口window.moveTo() - 移动当前窗口window.resizeTo() - 调整当前窗口的尺寸

JavaScript Window Screen

The Widow.screen object contains information about the user's screen.
Window screen
The Window.screen object can be written without using the window prefix, and its properties are:

• Screen.availwidth: Available screen widths
• Screen.availheight: Available Screen height

Window Screen Available width
The Screen.availwidth property returns the width of the visitor's screen, in pixels, minus the interface features, such as the window taskbar:

<script>document.write("可用宽度: " + screen.availWidth);            // 返回屏幕可用宽度：1920</script>

Window Screen Available height
The Scree.availheight property returns the height of the visitor's screen, in pixels, minus the interface features, such as the window taskbar:

<script>document.write("可用高度: " + screen.availHeight);            // 返回屏幕可用高度：1040</script>

JavaScript Window Location

The Window.location object is used to get the address (URL) of the current page and redirect the browser to a new page.

Window Location
The Window.location object can be written without using the window prefix, as in the following example:

• Location.hostname: Returns the domain name of the web host;
• Location.pathname: Returns the path and file name of the current page;
• Location.port: Returns the port of the web host (80 or 443);
• Location.protocol: Returns the Web protocol used (/HTTP///https://);

Window location Href
The Location.href property returns the URL of the current page:

<script>document.write(location.href);            // 返回当前页面的整个URL：https://www.baidu.com/</script>

Window location Pathname
The Location.pathname property returns the path name of the URL:

<script>document.write(location.pathname);            // 返回当前URL的路径名：/</script>

Window location Assign
The Location.assign () method loads the new document:

JavaScript Window History

The Window.history object contains the history of the browser.

Window history
The Window.history object can be written without using the window prefix, limiting the way JavaScript accesses the object in order to protect the user's privacy:

• History.back (): Same as clicking the Back button in the browser;
• History.forward (): The same as clicking the Forward button in the browser;

Window history back
The History.back () method loads the previous URL in the History list, which is the same as clicking the Back button in the browser:

Window History Forward
The History.forward () method loads the next URL in the History list, which is the same as clicking the Forward button in the browser:

JavaScript Window Navigator

The Window.navigator object contains information about the visitor's browser.

Window Navigator
The Window.navigator object can be written without using the window prefix:

Warning
The information from the Navigator object is misleading and should not be used to detect browser versions because:

• Navigator data can be changed by the browser user;
• Some browsers will identify errors to the test site;
• The browser cannot report a new operating system later than the browser release;

Browser detection
Because navigator can mislead browser detection, using object detection can be used to sniff out different browsers. Because different browsers support different objects, we can use objects to detect the browser. For example, opera can be identified by only the Opera support attribute "Window.opera".

if (window.opera) {...some action...}

JavaScript Pop-up window

Front-End Basics: JavaScript BOM Objects