JS's BOM

JS Language is a scripting language responsible for the dynamic effect of the page in BS development, in this case, the knowledge about browser pages, BOM: Browser object model, related to JS in the operation of the browser page of some basic knowledge. The most central object here is window, which contains six large attributes, which are objects themselves.

As you can see from the diagram, the Document object in window, the DOM (which is summarized separately), is most commonly used in window. Here is a simple summary of the related methods and uses in the Window object.

First, System dialog box

This method is mainly used to interact with the user and play a role in prompting the user. In the BOM pop-up window, the main concerns are three:

Alert (): Equivalent to VB in the simplest form of MsgBox (), is often used in JS for testing.

Prompt (): Enter a hint box similar to InputBox

Confirm (): Ok and Cancel, MsgBox can also implement this function

second, position and size

The main point is to get a size and position of the window. The location and size of the elements in the DOM need to be distinguished here.

1. Size : Used to get the browser window size

Non-IE:

Innerwidth/height: Does not include the size of the menu bar, toolbar, and border, just the size of the page display section.

Outerwidth/height: The current size of the entire window, including the menu bar, toolbars, and borders.

IE: You can take advantage of clientwidth/height to get the actual size of the element, where there is a lot of correlation with the size of the DOM to get the element, summarized later.

2. Location : Get the current position of the browser, distance from the left and top.

Non-ie:screenleft/top

ie:screenx/y

These are the most basic representation of getting the position and size of the window, and can be compared with the DOM to get the dimension and position of the element. It is usually used when the setting element is centered, and when it is used, it involves compatibility issues with each browser, and can also use MoveTo (,), Moveby (,) Resizeto (,) Resizeby () to move elements.

Iii. Common Methods

JS is a single-threaded language and does not support multithreading, so it provides two methods specifically for lazy loading and intermittent invocation

1. Timeout call

SetTimeout (method of execution, time of delay)//contains two parameters in parentheses

Where can it be used?

Actual combat: The paste (paste) trigger event in JS occurs before pasting into the target area, so if you want to trigger the method you want to execute after pasting the event, we can use lazy loading to implement this function.

var box=function () {setTimeout (' Paste succeeded! '), 50}; The default unit milliseconds, the event binding code is slightly

This method returns an ID value by default, and JS also provides a cleartimeout () method that can be used to cancel a supermarket call, using only the ID (return value) of the cancellation method to be assigned to cleartimeout as the parameter.

cleartimeout (box);

2. Intermittent calls

SetInterval (method of execution, intermittent time), same as above, and clearinterval () can be used to cancel intermittent calls.

3. Manipulating the parent window

When using a browser, you will often encounter in the popup window to trigger the parent window, JS in the Open () method used for opening a new child window, while the default parent window is identified as opener, you can add an event in the child window, to trigger the parent window corresponding.

Document.onclick = function () {    opener.document.write (' child window let me output! ');}

Summary: These are some of the most common basics of Window objects, and in learning this part, avoid confusing some of the knowledge in the DOM, such as getting element size and size. Because many of these properties can be shared. For example: location can get the current URL, with navigation function, can be page jump, this is the other objects in the BOM is commonly used when we use the browser, such as the history of the object to view historical information.

JS's BOM