Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the knowledge points of JavaScript BOM". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what are the knowledge points of JavaScript BOM"?

1. Introduction to BOM

The so-called BOM is browser object Model (Browser Object Model). BOM gives JS the ability to operate the browser, that is, window operation. DOM is used to create delete nodes and manipulate HTML documents. There is no formal standard for BOM, which results in different browsers' support for BOM methods, so specific problems need to be dealt with.

2. Window object

The window object is the core of BOM, and the window object refers to the current browser window. All JS global objects, functions, and variables belong to window objects. Global variables are properties of the window object. The global function is the method of the window object. Even DOM's document is one of the properties of the window object, but it can be ignored in most cases.

Window object method:

Method description alert () pops up an alarm box with a text message and a confirmation button prompt () pops up a dialog box that prompts the user for input confirm () pops up a dialog box with a text message and a confirmation button and a cancel button open () opens a new browser window close () closes the browser window print () prints the contents of the current window focus () gives the keyboard focus to a window Port blur () moves the keyboard focus away from the top window moveBy (xnum Ynum) moves the object relative to the current coordinates of the window moveTo (x, y) moves the upper left corner of the window to a specified coordinate resizeBy (w, h) resizes the window to the specified width and height according to the specified pixel resizeTo (w, h) scrollBy (xnum, ynum) scrolls the content scrollTo (x) by the specified pixel value Y) Scroll the content to the specified coordinates setInterval () execute the code setTimeout () at specified intervals after the specified delay time to execute the code clearInterval () cancel the setting of setInterval () clearTimeout () cancel the setting of setTimeout ()

3. Window operation

(1) Open the window

The open () method can be used to open a new window.

Syntax: window.open (url, name/target, window settings, replace)

All three parameters of this method are optional, and a blank page opens by default on the new page. The first parameter sets the path to open the window. The second parameter specifies where to open the new window and can also be used to specify the name of the window. The third parameter sets the window parameters, and multiple parameters are separated by commas. If there is the first parameter and the last two parameters can be omitted, it opens on a new page. The second parameter generally does not need to be set, if you want to specify the parameters of the window, there must be a second parameter, must be'_ blank', or use', instead, and the distance from the top of the screen can not be 0, otherwise invalid, if you set the left distance, the top can be set to 0. The last parameter specifies whether the URL loaded into the window creates an entry in the window's browsing history or replaces the current entry in the browser history, with a value of true or false, URL replaces the current entry in the browsing history when true, and URL creates a new entry in the browsing history when false.

The following table shows some common window settings parameters:

Parameters.

Value

Description

Top

Num

The distance from the new window to the top of the screen

Left

Num

The distance from the new window to the left end of the screen

Width

Num

Width of the new window

Height

Num

The height of the new window

Menubar

Yes/no/1/0

Whether the window has a menu bar. The default is yes.

Scrollbars

Yes/no/1/0

Whether the window has a scroll bar. The default is yes.

Toolbar

Yes/no/1/0

Whether the window has a toolbar. The default is yes.

Status

Yes/no/1/0

Whether the window has a status bar. The default is yes.

Location

Yes/no/1/0

Whether the window displays the address bar. The default is yes.

Resizable

Yes/no/1/0

Whether to change the window size is allowed. The default is yes.

Directories

Yes/no/1/0

Whether to add a directory button. The default is yes.

Example A: click the button to open the home page of Shanghai Shangxue School in a new window, 600 wide, 400 high, 0 pixels away from the top of the screen, 10 pixels on the left of the screen.

Function printpage () {

Window.print ()

}

Function printpage () {

Window.print ()

}

(3) close the window

The window.close () method can be used to close the current window.

/ / Click the button to close the current window

The method works well under Chrome. IE pop-up window prompt: the web page you are viewing is trying to close the tab. do you want to close the tab? Click No, do not close, click Yes, close the window. An error will be reported under FF, because under FF scripts are not allowed to close windows that are not opened by scripts, that is, they cannot close windows opened by users themselves, but only windows opened by open. So you can open it with open and then close it, which can solve the problem that you can't close it under FF. This requires the creation of two documents to demonstrate the problem: the second document is saved as close.html using the above example, and the first document is as follows:

/ / first open the saved document with open, and then click the close window button to achieve the effect.

FF browser security mechanism is relatively high, can not close the window opened by users, there is no good way to find on the Internet, can only modify the default configuration of the browser, obviously this is not desirable. The above method is relatively stupid, another strange can not close the user opened, then their own open a re-close, but this is still a more practical method, at least the goal is achieved.

Under IE, you can use the following code to close the current window without popping the window prompt. It also applies to Chrome. Using the a tag here, you can see the error message under FF, but there is no error message using the button.

Close a >

Instance G: close the newly opened window

Function openWin () {newWin = window.open ('http://www.shsxt.com/',', 'width=400,height=300,top=200');} function closeWin () {newWin.close ();} script > body >

Example H: check whether the new window is closed

P > var newWin; function openWin () {newWin = window.open (',', 'width=400,height=300,top=200');} function closeWin () {if (newWin) {newWin.close ();}} var oP = document.getElementById (' p1'); function checkWin () {if (! newWin) {OPP [XSS _ clean] = 'New window has not been opened yet!' ;} else {if (newWin.closed) {op [XSS _ clean] = 'New window is closed!' ;} else {op [XSS _ clean] = 'the new window is not closed!' ;} script > body >

4. Browser information

The window.navigator object gets information about the visitor's browser. This attribute can be used without the window prefix.

[/ font] [/ color] [/ align] [align=left] [color=rgb (0,0,0)] [font= "] div > txt ='

Browser CodeName (browser code name):'+ navigator.appCodeName +'p >'; txt+='

Browser Name (browser name):'+ navigator.appName +'p >'; txt+='

Browser Version (browser version):'+ navigator.appVersion +'p >'; txt+='

Cookies Enabled (Cookies enabled):'+ navigator.cookieEnabled +'p >'; txt+='

Platform (operating platform):'+ navigator.platform +'p >'; txt+='

User-agent header (the client sends the server's user-agent header information):'+ navigator.userAgent +'p >'; txt+='

User-agent language (client agent language):'+ navigator.systemLanguage +'p >'; document.getElementById ('div1') [xss_clean] = txt; script > body >

The most commonly used attribute is navigator.userAgent, which returns a string representation of the user agent header (that is, characters including browser version information, etc.)

[xss_clean] (navigator.userAgent); script > at this point, I believe you have a deeper understanding of "what are the knowledge points of JavaScript BOM?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.