[JS Interaction] BOM Basics, Window, Location, Navagator, Screen, History Objects

1. BOM overview

There are three kinds of objects in the JavaScript language: built-in objects, host objects, and custom objects.

A host object is an object provided by the environment in which JavaScript scripts are executed. For web programming, jsit runs on the browser, so for web programming, the host object is the browser object, and to learn the browser object, you must learn the browser object model, that is, BOM.

JavaScript Basics to Advanced
Canvas Game Development
Native JavaScipt Case Collection
JavaScript + DOM Basics

BOM (Browser Object Model), browser object model:

BOM is mainly used to manage the communication between windows, so its core object is window (ie: window object);
Browser Object Model (Browser Object Model) There is no formal standard; but because modern browsers have (almost) implemented the same methods and properties of JavaScript interactivity, it is often considered the method and property of BOM

insert image description here

Two, Window object

2.1 Overview

As the top-level object in the browser model, the window object refers to the current browser window, under which there are corresponding read-only attributes pointing to document, history, location, navigator, screen, and other clipboardDataobjects.
All browsers support the window object, and all JavaScript global objects, functions, and variables automatically become members of the window object (global variables are properties of the window object, global functions are methods of the window object, and even the document of Html Dom is also one of the properties of the window object. one.

If window.document.getElementById("myId")is document.getElementById("myId")the same as .

2.2 Opening and closing of windows

open(url, target, args) open a new window
- The parameter url is optional. URL or path to open
- The parameter target is optional. window opening method
- The parameter args is optional. Window style settings. Parameter string for key=value. The style parameters of the window settings are as follows:
  - top=pixel value, the number of pixels from the top of the window to the top of the screen
  - left=pixel value, the number of pixels from the left end of the window to the left end of the screen
  - width=pixel value, the width of the window height=pixel value, the height of the window
  - menubar=yes|no, set whether the window has a menu
  - toolbar=yes|no, set whether the window has a toolbar
  - scrollbars=yes|no, set whether the window has scroll bars
  - status=yes|no, set whether the window has a status bar
close() closes the current window

2.3 Window relationship and framework

The Window object of the new window created by window.open() has the opener property, and its original window can be opened through the opener, so that the two windows can refer to each other, and they can read each other’s property methods, and the window The body is the same;
A form is created by an iframe. This element has a contentWindow attribute, which refers to its own Window object, and the Window object has a frameElement attribute. If the Window object represents a form, frameElement is a reference to the iframe element, such as the following elements
```
<iframe id = 'f1'></iframe>
var elt = document.getElementById('f1');
var win = elt.contentWindow;
win.frameElement === elt; //true
window.frameElement === elt; //false 对于顶级窗口来说永远是false
```
Every Window object has a frames property, including forms and subforms. The frames attribute refers to the Window object of the form and sub-form it contains, and frames is an array-like object composed of these Window objects, which can be indexed by number or form name, such as referring to the first sub-form frames[ 0], refer to the third sub-form frames[1].frames[2] of the second sub-form, refer to the sibling form parent.frames[1];
Built-in objects are independent between different windows and forms. They have their own independent constructor and a copy of the prototype object, which will be automatically predefined in all window forms; while custom objects are different , the constructor and its prototype of this object can be shared between windows and forms that can communicate with each other; if the Set class is defined in the window, and there are child forms A and B, then: in the parent window
:
```
var s = new Set(); String.toString = function(){return '内置对象';} （修改String的toString方法）
s.a === 1; //true
```
In A:
```
var sa = new parent.Set(); parent.Set.prototype.a =1; （给自定义类Set的原型添加属性a，则所有能相互通信的窗口共享a）
var str = '测试';  str.toString; //测试  （调用的是窗体A自身的String对象的toString方法）
```
In B:
```
var Set = top.Set(); var sb = new Set(); sb.a === 1;  //true
```

To refer to a form within a window, use the following syntax:

frames[i] //当前窗口的框架
self.frames[i] //当前窗口的框架
w.frames[i] //窗口 w 的框架

To refer to a frame's parent window (or parent frame), use the following syntax:

parent //当前窗口的父窗口
self.parent //当前窗口的父窗口
w.parent //窗口 w 的父窗口

To refer to it from any of the frames contained in the top-level window, use the following syntax:

top //当前框架的顶层窗口
self.top //当前框架的顶层窗口
f.top //框架 f 的顶层窗口

2.4 Message box (popup window, system dialog box)

alert() alert box. It is often used to ensure that the user can get certain information; when the warning box appears, the user needs to click the OK button to continue the operation
confirm() confirmation box. It is used to verify whether to receive user operations. When the confirmation box pops up, the user can click "Confirm" or "Cancel" to confirm the user operation. When "Confirm" is clicked, the confirmation box returns true. If "Cancel" is clicked, the confirmation box returns false
prompt() Prompt box. It is often used to prompt the user to enter a certain value before entering the page; when the prompt box appears, the user needs to enter a certain value, and then click the confirm or cancel button to continue the operation; if click confirm, then return the entered value, if click cancel , returns null

2.5 Get the current viewport size

innerWidth Gets the width of the current viewport (read only)

innerHeight Get the height of the current viewport (read only)

Does not include toolbars, menu bars, system bars, console area... includes scrollbars

IE8 and below browser versions are not compatible, so please use the following methods to obtain:

document.documentElement.clientWidth || document.body.clientWidth;
dowcument.documentElement.clientHeight || document.body.clientHeight;

IE6 and below can only be document.bodyobtained through

browser compatibility

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

2.6 Timer

setInterval(callbackfn, time) Intermittent call; perform repeated operations every specified time, call multiple times, unless manually cleared

setTimeout(callbackfn, time) Delayed call; perform an operation after a specified time, only once, and can be cleared before execution

clearInterval(timer) clears the specified intermittent calls

clearTimeout(timer) clears the specified delay call

var num = document.getElementById("num");
    var count = 0;
    var timer = window.setInterval(function(){
        if(count === 100){
            // 清除计时器
            clearInterval(timer)
        }
        num.innerHTML = count++ + "+";
},80);


window.setTimeout(function(){
    alert("不好意思，我打断一下！！")
},5000)
``

Three, Navigator object

Navigator object properties are as follows:

Attributes	illustrate
appCodeName	Returns the code name of the browser
appName	Returns the name of the browser
appVersion	Returns the browser's platform and version information
platform	Returns the operating system platform on which the browser is running
userAgent	Returns the value of the user-agent header sent by the client to the server

Three, Screen object

Screen object properties are as follows:

Attributes	illustrate
availHeight	Returns the height of the screen (excluding the Windows taskbar)
availWidth	Returns the width of the screen (excluding the Windows taskbar)
colorDepth	Returns the bit depth of the palette on the target device or buffer
height	Returns the total height of the screen
pixelDepth	Returns the color resolution of the screen (bits per pixel) does not support IE8 and below browsers
width	Returns the total width of the screen

Four, History object

The properties of the History object are as follows:

Attributes	illustrate
length	Returns the number of URLs in the history list

The History object method is as follows:

method	illustrate
back()	Load the previous URL in the history list, which is equivalent to the back arrow on the browser
forward()	Load the next URL in the history list, which is equivalent to the forward arrow on the browser
go()	Load a specific page in the history list

Five, Location object

The properties of the Location object are as follows:

Attributes	describe
hash	Returns the anchor portion of a URL
host	Returns the hostname and port of a URL
hostname	Returns the hostname of the URL
href	return the full URL
pathname	Returns the URL pathname.
port	Returns the port number used by a URL server
protocol	Return a URL protocol (such as: http https ftp and other protocols)
search	Returns the query part of a URL

Location object methods are as follows:

method	illustrate
assign()	load a new document
reload()	Reload the current document, which is equivalent to the refresh button on the browser
replace()	replace the current document with a new one

Attached address bar analysis:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-jYjueXtA-1691110488436)(BOM note.assets/image-20210112161122731.png)]