《JavaScript高級程序設計》第8-9章

第八章 BOM

一、window對象：既是經過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象

1）全局做用域：全部在全局做用域中聲明的變量、函數都會變成window對象的屬性和方法；全局變量不能經過delete操做符刪除，而直接在window對象上定義的屬性能夠

2）窗口關係及框架：若是頁面中包含框架，則每一個框架都擁有本身的window對象，而且保存在frames集合中；top對象始終指向最高（最外）層的框架，也就是瀏覽器窗口；parent對象始終指向當前框架的直接上層框架；self對象始終指向window對象

3）窗口位置：用於肯定和修改window對象位置的屬性和方法，IE、Safari、Opera和Chrome提供了screenLeft和screenTop屬性、Firefox、Safari和Chrome提供了screenX和screenY屬性用於表示窗口相對於屏幕左邊和上邊的位置；moveTo()接收的是新位置的x和y座標值，moveBy()接收的是在水平和垂直方向上移動的像素值，只適用於最外層的window對象，有可能被瀏覽器禁用

4）窗口大小：IE9+、Firefox、Safari、Opera和Chrome中提供了4個屬性：innerWidth、innerHeight、outerWidth和outerHeight用於肯定窗口大小；IE、Firefox、Safari、Opera和Chrome中document.documentElement.clientWidth和document.documentElement.clientHeight用於肯定頁面視口大小；IE6中，這些屬性必須在標準模式纔有效，若是是混雜模式，就必須經過document.body.clientWidth和document.body.clientHeight；Chrome中，若是是混雜模式，不管經過document.documentElement的Width和Height仍是document.body的clientWidth和clientHeightt均可以用於肯定頁面視口大小；resizeTo()接收的是瀏覽器窗口的新寬度和新高度，resizeBy()接收的是瀏覽器新窗口與原窗口的寬度和高度之差，只適用於最外層的window對象，有可能被瀏覽器禁用

5）導航和打開窗口：window.open()方法既能夠導航到一個特定的URL，也能夠打開一個新的瀏覽器窗口，接收4個參數：要加載的URL、窗口目標（_self、_parent、_top、_blank或已有窗口或框架的名稱）、一個特性字符串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值；window.close()方法能夠關閉新打開的窗口；

彈出窗口屏蔽程序：

var blocked=false;

try{

var wroxWin=window.open(「http://」,」_blank」);

if(wroxWin==null){

blocked=true;

}catch(ex){

blocked=true;

}

}

If(blocked){

alert(「The popup was blocked!」);

}

6）間歇調用和超時調用：調度代碼在特定的時刻執行，前者是在指定的時間事後執行代碼，然後者則是每隔指定的時間就執行一次代碼；超時調用使用window對象的setTimeout()方法，接收兩個參數：要執行的代碼（不建議以字符串做爲參數）和以毫秒錶示的時間，調用setTimeout()方法會返回一個超時調用ID，能夠經過它來取消超時調用clearTimeout()；間歇調用使用window對象的setInterval()方法，接收兩個參數：要執行的代碼（字符串或函數）和以毫秒錶示的時間，調用setInterval()方法會返回一個間歇調用ID，能夠經過它來取消超時調用clearInterval()；使用超時調用來模擬間歇調用的是一種最佳模式

7）系統對話框：alert()、confirm()和prompt()方法能夠調用系統對話框向用戶顯示消息；alert()方法包含指定的文本和一個OK按鈕；confirm()方法包含指定的文本、一個OK按鈕和一個Cancel按鈕；prompt()包含指定的文本、一個文本輸入域、一個OK按鈕和一個Cancel按鈕，接收兩個參數：要顯示給用戶的文本提示和文本輸入域的默認值

二、location對象

1）查詢字符串參數

2）位置操做：assign()接收一個參數：要導航到的URL，用於打開新URL並在瀏覽器的歷史記錄中生成一條記錄；replace()接收一個參數：要導航到的URL，用於打開新URL但不會在瀏覽器的歷史記錄中生成一條記錄；reload()用於從新加載當前顯示的頁面，可選參數true表示從服務器從新加載，或者可能從緩存中加載

三、navigator對象

1）檢測插件：plugins數組，包含屬性name（插件的名字）、description（插件的描述）、filename（插件的文件名）、length（插件所處理的MIME類型數量）；hasPlugin()函數

//檢測全部瀏覽器中的Flash

Function hasFlash(){

var result=hasPlugin(「Flash」);

If(!result){

Result=hasIEPlugin(「ShockwaveFlash.ShockwaveFlash」);

}

return result;

}

alert(「hasFlash()」);

2）註冊處理程序：registerContentHandle()方法接收三個參數：要處理的MIME類型、能夠處理該MIME類型的頁面的URL以及應用程序的名稱；registerProtocolHandle()方法接收三個參數：要處理的協議、能夠處理該協議的頁面的URL以及應用程序的名稱

四、screen對象：用於代表客戶端的能力，其中包括瀏覽器窗口外部顯示器的信息

五、history對象：保存用戶上網的歷史記錄，從窗口被打開的那一刻算起；go()方法能夠在用戶的歷史記錄中任意跳轉，接收一個整數參數，負數表示向後，用back()代替，正數表示向前，用forward()代替；length屬性保存歷史記錄的數量

第九章 客戶端檢測

一、能力檢測（特性檢測）：首先檢測達成目的的最經常使用的特性，並且必須檢測實際要用到的特性，其基本模式以下：

if(object.propertyInQuestion){

//使用object.propertyInQuestion

}

更可靠的能力檢測：在可能的狀況下，要儘可能使用typeof進行能力檢測，其基本模式以下：

function isHostMethod(object,property){

var t=typeof object[property];

return t==’function’||(!!(t==’object’&&object[property]))||t=’unknown’;

}

能力檢測，不是瀏覽器檢測

二、怪癖檢測：檢測瀏覽器存在的缺陷

三、用戶代理檢測：經過檢測用戶代理字符串來肯定實際使用的瀏覽器；在每一次HTTP請求過程當中，用戶代理字符串是做爲響應首部發送的，並且該字符串能夠經過JavaScript的navigator.userAgent屬性訪問；用戶代理檢測通常適用於如下三種狀況：不能直接準確地使用能力檢測或怪癖檢測，同一款瀏覽器在不一樣平臺下具有不一樣的能力，爲了跟蹤分析等目的須要知道確切的瀏覽器；完整的用戶代理字符串檢測腳本以下：

var client = function(){

 

    //呈現引擎

    var engine = {            

        ie: 0,

        gecko: 0,

        webkit: 0,

        khtml: 0,

        opera: 0,

 

        //完整的版本號        

ver: null  

    };

    

    //瀏覽器

    var browser = {

        

        //主要瀏覽器

        ie: 0,

        firefox: 0,

        safari: 0,

        konq: 0,

        opera: 0,

        chrome: 0,

 

        //具體的版本號

        ver: null

    };

 

    

    //平臺、設備和操做系統

    var system = {

        win: false,

        mac: false,

        x11: false,

        

        //移動設備

        iphone: false,

        ipod: false,

        ipad: false,

        ios: false,

        android: false,

        nokiaN: false,

        winMobile: false,

        

        //遊戲系統

        wii: false,

        ps: false 

    };    

 

    //檢測呈現引擎和瀏覽器

    var ua = navigator.userAgent;    

    if (window.opera){

        engine.ver = browser.ver = window.opera.version();

        engine.opera = browser.opera = parseFloat(engine.ver);

    } else if (/AppleWebKit\/(\S+)/.test(ua)){

        engine.ver = RegExp["$1"];

        engine.webkit = parseFloat(engine.ver);

        

        //肯定是Chrome仍是Safari

        if (/Chrome\/(\S+)/.test(ua)){

            browser.ver = RegExp["$1"];

            browser.chrome = parseFloat(browser.ver);

        } else if (/Version\/(\S+)/.test(ua)){

            browser.ver = RegExp["$1"];

            browser.safari = parseFloat(browser.ver);

        } else {

            //近似地肯定版本號

            var safariVersion = 1;

            if (engine.webkit < 100){

                safariVersion = 1;

            } else if (engine.webkit < 312){

                safariVersion = 1.2;

            } else if (engine.webkit < 412){

                safariVersion = 1.3;

            } else {

                safariVersion = 2;

            }   

            

            browser.safari = browser.ver = safariVersion;        

        }

    } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){

        engine.ver = browser.ver = RegExp["$1"];

        engine.khtml = browser.konq = parseFloat(engine.ver);

    } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){    

        engine.ver = RegExp["$1"];

        engine.gecko = parseFloat(engine.ver);

        

        //肯定是否是Firefox

        if (/Firefox\/(\S+)/.test(ua)){

            browser.ver = RegExp["$1"];

            browser.firefox = parseFloat(browser.ver);

        }

    } else if (/MSIE ([^;]+)/.test(ua)){    

        engine.ver = browser.ver = RegExp["$1"];

        engine.ie = browser.ie = parseFloat(engine.ver);

    }

    

    //檢測瀏覽器

    browser.ie = engine.ie;

    browser.opera = engine.opera;

    

 

    //檢測平臺

    var p = navigator.platform;

    system.win = p.indexOf("Win") == 0;

    system.mac = p.indexOf("Mac") == 0;

    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

 

    //檢測windows操做系統

    if (system.win){

        if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){

            if (RegExp["$1"] == "NT"){

                switch(RegExp["$2"]){

                    case "5.0":

                        system.win = "2000";

                        break;

                    case "5.1":

                        system.win = "XP";

                        break;

                    case "6.0":

                        system.win = "Vista";

                        break;

                    case "6.1":

                        system.win = "7";

                        break;

                    default:

                        system.win = "NT";

                        break;                

                }                            

            } else if (RegExp["$1"] == "9x"){

                system.win = "ME";

            } else {

                system.win = RegExp["$1"];

            }

        }

    }

    

    //移動設備

    system.iphone = ua.indexOf("iPhone") > -1;

    system.ipod = ua.indexOf("iPod") > -1;

    system.ipad = ua.indexOf("iPad") > -1;

    system.nokiaN = ua.indexOf("NokiaN") > -1;

    

    //windows平臺

    if (system.win == "CE"){

        system.winMobile = system.win;

    } else if (system.win == "Ph"){

        if(/Windows Phone OS (\d+.\d+)/.test(ua)){;

            system.win = "Phone";

            system.winMobile = parseFloat(RegExp["$1"]);

        }

    }

    

    

    //檢測IOS版本

    if (system.mac && ua.indexOf("Mobile") > -1){

        if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){

            system.ios = parseFloat(RegExp.$1.replace("_", "."));

        } else {

            system.ios = 2;  //can't really detect - so guess

        }

    }

    

    //檢測Android版本

    if (/Android (\d+\.\d+)/.test(ua)){

        system.android = parseFloat(RegExp.$1);

    }

    

    //遊戲系統

    system.wii = ua.indexOf("Wii") > -1;

    system.ps = /playstation/i.test(ua);

    

    //返回這些對象

    return {

        engine:     engine,

        browser:    browser,

        system:     system        

    };

 

}();