Home > Developer > JavaScript
BOM application in JS and JSBOM Application
We have mentioned that JS consists of three parts: BOM, which is used to operate browsers. In this lesson, we will mainly introduce BOM.
BOM Basics
Let's take a look at the basic function of BOM: open and close the window:
<Html>The open method is used to open a window, and the close method is used to close a window. Here we can use the open method to implement an application: run the code.
Before that, we would like to add a little bit about document. write.
<! Doctype html>When you open the source code, you can find that when we click the button, only "abc" is left in the source code of the entire page-that is, if the document. if write is used in an event, the page is completely cleared before rewriting.
We can see that the document. write method is very suitable for our code running case:
<Html>_ Blank indicates that a new window is opened (use _ self in this window), about: blank indicates that a blank window is opened, and then we use document. write writes html to the new window to run the html code in the new window.
After opening, let's talk about some close issues. Close is easy to use. You can use window. close to close the window. However, in Firefox, you cannot close a window opened by a user. You can close it only when the open method is used.
After completing the open and close methods, we have two common attributes: window. nevigator. userAgent and window. location. The former is used to obtain the version information of the current browser, and the latter is used to obtain the address of the current web page (which can be read or assigned a value, you can modify the location to jump to the current webpage URL). You can use it to check the returned content.
Dimensions and coordinates
Here we will discuss about the size and coordinates of JS.
The first thing to mention is the knowledge about the size of the visible area. What is the visible area size? In fact, the user can see the size of the webpage on the screen. The size of the visible area varies with the size of the window.
Pass
Document.documentelement.clientwidthand document.doc umentElement. clientHeightYou can obtain the width and height of the visible area of the current page.<Html>The effect is as follows:
In addition, for the visible area, there is also an attribute called scrollTop, that is, the rolling distance, or the distance from the visible area to the top of the page.
<! Doctype html>The effect is as follows:
// The figure is shown here.
It is worth noting that
document.documentElement.scrollTopCompatible only with ie, And the write Rule In chrome isdocument.body.scrollTopSo we use the | method to handle compatibility issues.
Common methods and eventsHere we try to use another method except fixed to implement fixed positioning of elements (fixed is incompatible with ie6 ).
Here we will draw another figure:
We can see that as long as we calculate the length of the black line, we can fix the div block in the lower right corner. The length of the black line is equal to the height of the visible area minus the offsetHeight of the div block.
<Html>The effect is as follows:
We can see that our div block has slight jitter, because the onscroll function is always happening and will be called every time, so this will happen. In addition, there is a more serious situation: if we change the window size, the div block will not keep in the same place, so we need to use another event --
Window. onresize (the event triggered when the page size changes :):
window.onscroll=window.onresize=function (){...}Finally, let's talk about several common system dialogs:
Summary
The above is the BOM application in JS introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
