第八章?BOM

1、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按鈕，接收兩個參數：要顯示給用戶的文本提示和文本輸入域的默認值

2、location對象

1）查詢字符串參數

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

3、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以及應用程序的名稱

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

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

第九章?客戶端檢測

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

if(object.propertyInQuestion){

//使用object.propertyInQuestion

}

更可靠的能力檢測：在可能的情況下，要盡量使用typeof進行能力檢測，其基本模式如下：

function?isHostMethod(object,property){

var?t=typeof?object[property];

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

}

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

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

3、用戶代理檢測：通過檢測用戶代理字符串來確定實際使用的瀏覽器；在每一次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????????

????};

?

}();

轉載于:https://www.cnblogs.com/wuping/p/5089906.html

總結

以上是生活随笔為你收集整理的《JavaScript高级程序设计》第8-9章的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。