Moment For Technology

Learn BOM in one minute

Posted on Jan. 31, 2023, 1:53 p.m. by Michael Brown
Category: The front end Tag: javascript

This is the first day of my participation in Gwen Challenge. Please check out Gwen Challenge for details

At the heart of the BOM(Browser Object Model) is the Window object

1. The window object

The window object is an interface for JS to access the browser window, as well as the es Global object, which has access to methods such as parseInt()

1.1. Global scope

Since the Window object is also the Global object of ES, all variables and functions declared in the Global scope become properties and methods of the Window object

Var age = 18; function sayAge() { console.log(this.age); } // The following results are 18 console.log(window.age); sayAge(); window.sayAge();Copy the code

Although global variables become properties of the Window object, this is not the same as defining properties directly on the Window object

Global variables cannot be deleted by the DELETE operator, but directly defined properties can

However, in previous versions of IE9, deleting the Windows property statement with delete throws an error because it provides a new feature named [[signals]], which is configured with a different value of false

Attempting to access an undeclared variable throws an error, which can be avoided by querying the Window object to see if the variable is undeclared

Undeclared and undefined

Using this variable that is not declared will report an error but is declared but not defined so that the undiam

Var a = b; Var a = window.b // No error is raised even if b is not definedCopy the code

1.2. Window relationship and frame

The Frames collection contains all of the frames on the page, and each frame has its own Window object. The corresponding Window object in the Frames set can be accessed either by a numeric index or by the frame name, because the name of each frame is contained in the window object's name attribute.

We can refer to the topmost frame by window.frames[0] or window.frames["topFrame"].

However, the Window object contains a top object and a self object, which refer to the outermost frame and the innermost frame, respectively, and are used interchangeably with the Window object

// The expression is the same as window.frames[0]; top.frame[0];Copy the code

Corresponding to the top and self objects is a parent object that points directly to the parent of the current frame. But in the absence of a frame, parent must be equal to top(where they are both equal to Window).

We can concatenate window objects at different levels

Copy the code

1.3. Window position

IE Safari Opera Chrome Firefox
Support for screenLeft and screenTop attributes Square root Square root Square root Square root
Support for screenX and screenY attributes Square root Square root

We can also use the binary operator to determine whether screenLeft and screenTop are present, and if so, get the value of screenX/Y, if not.

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

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

Since it is difficult to get the exact left and top positions of the window across browsers, we can use the moveTo() and moveBy() methods to move the window to the exact position. MoveTo () receives the x and Y positions of the new position, while moveBy() receives the x and Y positions of the new position Number of pixels moving horizontally and vertically

These methods may be disabled by the browser, and they do not apply to the framework, only to the outermost Window object

1.4. Window size

IE9+ Safari Firefox Opera
OuterWidth and outerHeight properties Returns the size of the browser window itself Returns the size of the browser window itself Returns the size of the browser window itself
InnerWidth and innerHeight properties Returns the size of the page view area in the browser (minus the border) Returns the size of the page view area in the browser (minus the border) Returns the size of the page view area in the browser (minus the border)

All four Chrome properties return the same value, the viewport size.

Document in all browsers. DocumentElement. ClientWidth and document documentElement. ClientHeight save the page in the viewport information (proposed standard mode)

Update ing...
About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.