JavaScript Advanced Programming--bom (Browser object model)

Source: Internet
Author: User

A BOM (Browser object model) that provides objects that are independent of the content and interact with the browser window. A BOM is composed of a series of related objects.
First, Window object
The Window object represents the entire browser window, but does not have to represent what it contains. Window can also be used to move or adjust the size of the browser it represents.
(1) The Application of window object in frame
If the page uses a frame collection, each frame is represented by its own window object and stored in the Frames collection. In the Frames collection, the frames are indexed by number (starting from 0, left to right, line by row), or by name. You can use the top object instead of the Window object (for example: Top.frames[0]). The top object points to the topmost frame, which is the browser window itself.
Because the Window object is the center of the entire BOM, it enjoys the privilege of not having to explicitly reference it, and when referencing a function, object, or collection, the interpreter will see the Window object, so window.frame[0] can write only frame[0].
Window another instance is parent. The parent object is used with the Mount file framework, and the file to be mounted is also a frameset. The Name property of the Window object, which stores the name of the frame.
A more global window pointer is self, which is always equal to window, and if there is no frame on the page, window and seft are equal to the length of the Top,frames collection is 0.

      (2), window action
      Moveby (DX, DY) --Move the browser window horizontally relative to the current position dx pixels and move the dy pixels vertically. The DX value is negative, move the window to the left, the DY value is negative, and move the window up.
      MoveTo (x, y) -Move the browser window so that its upper-left corner is on the user's screen (x, y) , you can use negative numbers, but the sample will move some of the windows out of the viewable area of the screen.
      resizeby (DW,DH) --relative to the current size of the browser window, Adjust the width of the window to DW pixels, and adjust the height of the dy pixels. The DW is negative, the width of the window is reduced, dy is negative, and the height of the window is reduced.
      Resizeto (w,h) -Adjusts the width of the window to W, height to H, and negative numbers.
      (3), navigating and opening a new window
      using JavaScript to navigate to the specified URL, Use the window.open () method to open a new window. The method accepts four parameters, the URL of the page to load the new window, the name of the new window, the attribute string, and whether to replace the Boolean value of the currently loaded page with the newly loaded page. The properties of the window are determined by the third parameter (the attribute string). If you omit the third argument, a new browser window opens, just like clicking the link with target set to _blank. The attribute string is a comma-delimited list of settings that cannot have spaces before or after a comma or equal. It defines some aspects of the newly created window. The window.open () method returns the Window object as its function value, which is the newly created windows.

(4), System dialog box
       alert () square method: Only one parameter is accepted, That is, the text to be displayed to the user, and the browser creates a system message box with an OK button that displays the specified text.
       confirm () method: Only one parameter is accepted, that is, the text to be displayed, The browser creates a system message box with an OK button and a Cancel button to display the specified text. The method returns a Boolean value, if clicked is OK button, returns True, clicks the Cancel button, returns FALSE.
       prompt () method: Prompts the user to enter some information, accepts two parameters, The text that you want to display to the user and the default text in the text box. If you click the OK button, the value in the text box is returned as a function value. If you click the Cancel button, NULL is returned.
       above three dialog boxes are modal, meaning that if the user does not click the OK button or the Cancel button to close the dialog box, it is not possible to do any work in the browser window.

(5), time interval and pause
setTimeout () method: Sets a pause (executes the specified code after the specified number of milliseconds), accepts two parameters, the code to execute, and the number of milliseconds to wait before executing it (1/1000 seconds). The first argument is the code string (the same as the parameters of the eval () function), but also a function pointer.
cleartimeout () method: Cancels a pause that has not yet been performed and passes the pause ID to it.
setinterval () method: Sets the specified code to execute once every specified time period. The parameters are the same as settimeout ().
clearinterval () method: Blocks the code to be executed with the interval ID. Parameter accepts a time interval ID.

(6), history
The history of the browser window is the list of sites that the user has visited. Access to the history of the window object and its related methods can be used.
Go () method : Only one parameter, that is, the number of pages forward or backward, if it is negative, in the browser history back, if it is positive, forward. You can use the Length property to view the number of pages in history.

Third, locationobject
The Location object is one of the most useful objects in the BOM, and it is the property of the Window object and the Document object.
The Location object represents the URL of the loaded window, and the URL can be resolved.
The following table lists some common properties of the BOM's location object:

location.assign     ("Http://www.yiiyaa.net"); Set the URL of the window, as with the Location.href property
Location.replace    ("Http://www.yiiyaa.net"); As with the Assign () method, only the page containing the script is removed from the browser history, so it cannot be accessed through the browser's back and forward buttons.
Reload () method: Reload the current page with only one parameter, if False, load from the cache and if true, from the server. Finally put in the last line, because it is possible to be executed, it may not be executed, which is determined by network latency and system resources.
ToString () Method: Returns the value of Location.href.

Iv. Navigator Objects
Navigator is also a property of the Window object, which can be referenced by window.navigator or navigator.
V. Screen Object
The screen object can get some information about the screens.
availheight-the height (in pixels) of the screen that the window can use, including the space required by the operating system
availwidth-the width of the screen (in pixels) that the window can use.
colordepth-user represents the number of colors, most systems use 32-bit.
Height-the screen's altitude, measured in pixels.
width-the height of the screen, measured in pixels.

JavaScript Advanced Programming--bom (Browser object model)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.