Detailed analysis of BOM in JavaScript (with examples)

This article brings you a detailed analysis of BOM in JavaScript (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

BOM

BOM Browser Object Model, browser object model

window

The window object is the top-level object in js. All variables and functions defined in the global scope will become the properties and methods of the window object. You can omit the window when calling.

window.open(): Open a new window
window.close(): Close the current window
window.moveTo(): ​​Move the current window
window.resizeTo(): ​​Resize the current window The size of the window
window.onload(): When the page is loaded
window.onscroll(): When the page is scrolled
window.onresize(): When the page is resized

In In the browser, each tab has its own window object. That is to say, a window object will not be shared between tags in the same window

frames

If the page contains frames, each frame has its own window object and stored in the frames collection.

In the frames collection, the corresponding window object can be accessed by numerical index (starting from 0, from left to right, top to bottom) or frame name.

Each window object has a name property, which contains the name of the frame.

    <frameset>
        <frame>
        <frameset>
            <frame>
            <frame>
        </frameset>
    </frameset>

You can refer to the upper frame through window.frames[0] or window.frames["topFrame"].
top
But it is best to use top to refer to these frames (top.frames[0]), because the top object always points to the highest (outermost) frame, which is the browser window . Use this to ensure correct access from one frame to another. Because for any code written in a framework, the window object points to a specific instance of that framework, not the top-level framework.
parent
Another window object relative to top is parent. As the name suggests, the parent object always points to the frame directly above the current frame. In some cases, parent may be equal to top; but in the absence of a frame, parent must be equal to top (in this case, they are both equal to window).
self
The last object related to the frame is self, which always points to window; in fact, the self and window objects can be used interchangeably. The purpose of introducing the self object is just to correspond to the top and parent objects, so it does not specifically contain other values.

All these objects are properties of the window object and can be accessed through window.parent, window.top, etc. At the same time, this also means that window objects at different levels can be concatenated, such as window.parent.parent.frames[0].

#location

Navigator

The navigator object is to determine the user's browser and operating system.

navigator.appName: Browser name
navigator.appVersion: Browser version
navigator.language: Browser settings language
navigator.platform: Operating system type
navigator. userAgent: User-Agent string set by the browser

History

##history forward() : Method loads the next URL in the history list, which is the same as clicking the back button in the browser

history.back(): Method loads the previous URL in the history list, which is the same as clicking the forward button in the browser The buttons are the same
history.go(): The method can jump arbitrarily in the user's history, either backward or forward

screen

The Screen object stores information about the displayed browser screen.

screen.width: Screen width, in pixels

screen.availWidth: Available width of the screen, in pixels
screen.height: Screen height, in pixels

The above is the detailed content of Detailed analysis of BOM in JavaScript (with examples). For more information, please follow other related articles on the PHP Chinese website!