Reading time "JavaScript advanced Programming" Four: BOM, client detection

After a period of time, now begin to look at chapter 8th.

8th chapter: BOM

The 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 .

　　The Window object is an interface that accesses the browser window through JavaScript and is the global object in the ECMAScript.

　　All variables, functions declared in the global scope are properties and methods of the Window object.

　　1. Window relationship, Frame

　　　　Each frame has a Window object, and in the Frames collection

Each Window object has a Name property that contains the frame name

　　　　The top object always points to the highest (most outer) layer frame, which is the browser window

　　　The parent object always points to the immediate upper frame of the current frame

　　　　The self object always points to the Window object

　2. Window position, viewport size

var leftpos = (typeof Window.screenleft = = "Number")?   Window.screenleft:window.screenx;var Toppos = (typeof window.screentop = = "Number")?  Window.screentop:window.screeny;var PageWidth = Document.compatmode = = "Css1compat"? Document.documentelement.clientwidth:document.body.clientwidth;var PageHeight = Document.compatMode = = "CSS1Compat" ? Document.documentElement.clientHeight:document.body.clientHeight;

3. Open a new window　

function Opennewwindow () {    var win = window.open (' http://www.a.com/', ' Awindow ', ' width=300,height=300,left=10, Top=10 ');    Win.resizeto (500,500);    Win.moveto (100,100);    Win.close ();    

4. Interval Call Timeout call

After 1 seconds execution executes only once var Timeoutid = setTimeout (function () {alert ("Hello world!");},//cleartimeout (Timeoutid);//1 sec per interval Line one time until you cancel var timer = setinterval (function () {alert ("Hello world!");}, 1000);  Clearinterval (timer);//compatible with Requestanimationframe usage and settimeout similar if (!window.requestanimationframe) {                                  Window.requestanimationframe = (Window.webkitrequestanimationframe | |                                  Window.mozrequestanimationframe | |                                  Window.msrequestanimationframe | |                                  Window.orequestanimationframe | |                                  Function (callback) {return Window.settimeout (callback, 17); });}                                        if (!window.cancelrequestanimationframe) {window.cancelrequestanimationframe = (Window.cancelanimationframe | |                                        Window.webkitcancelrequestanimationframe | | Window.mozcancelrequeStanimationframe | |                                        Window.mscancelrequestanimationframe | |                                        Window.ocancelrequestanimationframe | | Window.cleartimeout);}

5. System dialog Box

Alertalert (' Hello world! '); /CONFIRMIF (Confirm (' is OK? ')) {//yes}else{//no}//promptvar result = prompt ("What is your name?", ""); if (result!== null) {alert ("Welcome," + result); }

6. Location Object

Http://www.a.com:1234/test.html?k1=v1&k2=v2#part2location.hash//URL Anchor part (#part2) location.hash= ' #hash '// The Location.host//url host name and port number are not reloaded location.href//the full Urllocation.pathname//url path section (/test.html) location.port// The port portion of the URL (1234) location.protocol//url the Protocol (HTTP) Location.search//url of the query section (? k1=v1&k2=v2) location.assign// Load a new document Window.location.assign ("http://www.a.com") window.location= ' http://www.a.com/'; location.href= '/http www.a.com/'; location.reload//Reload the current document Location.reload ()//reload may be re-loaded location.reload (TRUE)// Heavy server Reload Location.replace//replaces the current document with a new document Location.replace (' www.a.com ')//will not leave a history cannot be clicked back back to previous page// Go to the new urllocation.assign (' www.a.com ') window.location= ' www.a.com '; location.href= ' www.a.com ';

7. Navigator Objects

Navigator.appname//Name Navigator.appversion//version Navigator.appcodename//code name Navigator.platform// System platform navigator.cookieenabled//Whether cookies are enabled Navigator.useragent//browser user Agent header value (read-only String) if (/android| Windows phone|webos|iphone|ipod| Blackberry/i.test (navigator.useragent)) {location.href= "http://www.a.com/";} else if (/ipad/i.test (navigator.useragent)) {  location.href= "http://www.b.com/"}else{location.href= "http://www.c.com/"}

8. History Object

Back ()//load the previous URL in the History list (if present) is equivalent to clicking the rewind button or calling History.go ( -1) forward ()//Load History list the next URL is equivalent to clicking the Forward button or calling History.go (1) Go ()// Load a specific page in the History list//Back Page History.back ()  history.go (-1)//forward one page History.forward ()  

The 9th chapter: Client Detection

There are many ways to detect Web clients, and there is no need to use client-side detection, and a more general approach is to use a more general approach.

The most common form of client detection is capability detection (feature detection), which determines whether a browser supports a feature.

Basic detection format if (object.property) {//use object.property}//ie judgment var Isie =!! ("ActiveXObject" in window); var isIE6 =!document.addeventlistener &&!window. Xmlhttprequest;var isIE7 = Isie &&!! Window. XMLHttpRequest &&!document.documentmode;var isIE8 = Isie &&!document.addeventlistener &&!! Document.documentmode;if (isIE6) alert (' You're using a IE6 browser ') if (' IsIE7 ') alert (' You're using a IE7 browser ') if (isIE8) alert (' You're using a IE8 browser ')

Whenever possible, use typeof to detect when possible.

User Agent detection contains a large amount of browser-related information.

var ua = navigator.useragent; if (/android| Windows phone|webos|iphone|ipod| Blackberry/i.test (UA)) {location.href= "http://www.a.com/";} else if (/ipad/i.test (UA)) {  location.href= "http://www.b.com/"}else{location.href= "http://www.c.com/"}

The 8th chapter mainly introduces the window object of the browser, the various methods under the Window object, theNavigator object and the historyobject. the 9th chapter describes how to check the client, usually in order to be compatible with the general need to do such a test. Depending on whether the browser supports an attribute to detect, it is detected based on the browser's navigator.useragent(user agent information).

　　

　　

Reading time "JavaScript advanced Programming" Four: BOM, client detection