Eighth Chapter BOM

BOM: provides many objects for accessing the functionality of the browser. The core object of the BOM is window, which represents an instance of the browser. In the browser, window is both the interface for JS to access the browser window and the Glo object specified by JS.

var age =; function Sayage () {console.log (this. age);} Console.log (Window.age); Sayage (); //  in //  in

The difference between a global variable and a property that is directly defined on a Window object is that the global variable cannot be deleted by the delete operator, and the definition on the Window object can be deleted.

As shown in the following example:

var == "Red"; Delete Window.age; Delete Window.color;console.log (window.age); Console.log (Window.color); //  in // undefined

Window frame Window Position

: IE, Safari, OP, Chrome provide Screenleft and Screentop properties that represent the position of the window relative to the left and top. FF provides window position information using the Screenx and Screeny properties.

The compatibility of getting a cross-browser window position is as follows:

var leftpos = (typeof Window.screenleft = = "Number")? Window.screenLeft:window.screenX; // gets the position of the browser window relative to the left side of the screen var toppos = (typeof Window.screentop = = "Number")? Window.screenTop:window.screenTop;

IE and op: screenleft and Screentop hold the distance from the left and top of the screen to the visible area of the page represented by the Window object.

Chrome, FF, Safari: screenleft and Screentop are all the coordinates of the browser relative to the screen, that is, the left side of the window is 0 and returns 0;

Window size

ie9+, FF, Safari, OP, Chrome offers 4 properties: Innerwidth, Innerheight, Outerwidth, and Outerheight.

Outerwidth and Outerheight: Returns the size of the browser itself in ie9+, Safari, and FF . The OP returns the browser window corresponding to a single tab page.

innerwidth, Innerheight: the size of the Page view area in the container (minus the border width).

Chrome:innerwidth, Innerheight, Outerwidth, and outerheight all return the size of viewports.

mobile Devices:Window.innerwidth, Window.innerheight holds the visible viewport, which is the size of the page area visible on the screen.

IE, FF, Safari, OP, Chrome:

Document.documentElement.clientWidth, Document.documentElement.clientHeight Save the page viewport information.

varPageWidth =window.innerwidth, PageHeight=Window.innerheight;if(typeofPageWidth! = "Number") {if(Document.compatmode = = "Css1compat") {PageWidth=Document.documentElement.clientWidth; PageHeight=Document.documentElement.clientHeight; }Else{pagewidth=Document.body.clientWidth; PageHeight=Document.body.climentHeight; }}console.log ("The browser now has a viewport width of:" +pagewidth); Console.log ("The browser now has a viewport height of:" +pageheight);//The browser now has a viewport width of: 1920x1080//The browser's current viewport height is:

window.open: You can navigate to a specific URL or open a new browser window. Accepts four parameters: the URL to load, the window target, an attribute string, and a new window that replaces the currently loaded Boolean value in the current browser history.

window.open ("http://www.baidu.com", "Newframe"); // open Baidu, name the new window Newframe

timeout calls and intermittent calls

Set Timeout call

SetTimeOut (): executes code after the specified time. Take two parameters: the time in milliseconds to execute the code.

Passing a string can result in a performance penalty, and it is not recommended to use a string as the first parameter;

Time can only execute once the code, the second parameter tells JS how long to add the current task in the order of the queue execution.

Cancel Timeout Call: cleartimeout ();

// Set Timeout Call var timeoutid = setTimeout (function() {            console.log ("Hello, world!" );       ); // Cancel Timeout call cleartimeout (Timeoutid);

Intermittent Invocation: executes the code repeatedly at the specified time interval.

setinterval (): accepts two parameters: the time in milliseconds to execute the code.

It is seldom true to use intermittent calls because the latter intermittent call may start before the end of the previous intermittent call. You can avoid this by using a timeout call.

// set up intermittent calls var setintervalid = setinterval (function() {            console.log ("Hello, world!" );       ); // Cancel Intermittent call clearinterval (setintervalid);

varnum = 0, max = 10;varIntervalid =NULL;functionincrement () {num++; //using intermittent calls 　 if(num = =max)      {clearinterval (num); Console.log ("Done"); }}intervalid= SetInterval (Increment, 500);functionincrement () {num++; //simulating intermittent calls with timeout calls   //If Num has not yet reached Max's value, set another time-out call.  　  if(Num <max) {setTimeout (increment,500); }Else{Console.log ("Done"); }}settimeout (Increment,500);

Location Object

Provides information about the document that is loaded in the current window, even if the properties of the Window object are properties of the documents object.

Location operations

assign (): opens a new rul immediately and generates a history of one mind in the browser's history.

Location.assign ("http://www.baidu.com"= "http://www.baidu.com"= "http://www.baidu.com";

The three code works the same way. Open the Web page.

Eighth Chapter BOM