BOM（Browser Object Model，瀏覽器對象模型）&& 客戶端檢測

時間 2019-12-07

標籤 bom browser object model 瀏覽器對象模型客戶端檢測欄目瀏覽器简体版

原文原文鏈接

一、window對象

BOM的核心對象是window，它表示瀏覽器的一個實例。chrome

兩重身份：shell

　　一、js訪問瀏覽窗口的一個接口；瀏覽器

　　二、ECMAscript規定的Global對象。安全

1.一、全局做用域

在全局做用域中聲明的變量和函數都會變成window對象的屬性和方法。網絡

全局做用域中this指向window，直接定義在window對象上的變量和方法能夠刪除，經過var在全局做用域中定義的變量或者方法不能夠刪除。app

1.二、窗口關係及框架

頁面中包含框架（iframe算一個），則每一個框架都擁有本身的window對象，而且保存在frames集合中。框架

經過window.frames[0]或者window.frames["topFrame"]來引用上方的框架。而top.frames[0]指向最外層的框架，也就是瀏覽器窗口。ide

1.三、窗口位置，screenLeft||screenX

//以下，表示瀏覽器窗口到屏幕的左和上的距離。除FF外其餘瀏覽器都支持window.screenLeft，FF用screenX;
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
console.log(leftPos + "    " + topPos);

1.四、窗口大小 window.innerWidth||document.body.clientWidth||document.documentElement.clientHeight

// 獲取窗口寬度
if (window.innerWidth)
    winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth))
    winWidth = document.body.clientWidth;
// 獲取窗口高度
if (window.innerHeight)
    winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
    winHeight = document.body.clientHeight;
// 經過深刻 Document 內部對 body 進行檢測，獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
    winHeight = document.documentElement.clientHeight;//頁面視口的信息
    winWidth = document.documentElement.clientWidth;
}

調整窗口大小用到window.resizeTo(W,H); 和window.resizeBy(W,H);函數

1.五、導航和打開窗口window.open()方法

window.open(URL,name,features（窗口特徵，大小等）,replace（是否替代原來的窗口,true: 替換，false：不替換）)ui

window.open("https://www.baidu.com","windowName","width=200,height=500",false);

可使用window.moveTo(L,R);來移動窗口位置。

1.六、間歇調用與超時調用：setTimeout()&&setInterval()

var timeoutId = setTimeout(function(){//延時1s後調用，這裏會返回一個數值ID
    alert("hello world!");
},1000);

//取消延時調用
clearTimeout(timeoutId);//須要傳入延時的數值ID

同理對於setInterval(),，通常開發中不會使用間歇調用，通常都會使用超時調用來模擬，由於間歇調用可能會出現前一個間歇調用結束以前啓動了後一個間歇調用。

var  num = 0,
     max = 20
function incrementNumber(){
    num++;
    //若是執行的次數未達到max設定的值，就會啓動另外一次延遲調用
    if(num < max){
        setTimeout(incrementNumber,500);//這裏是調用函數，並非執行函數，因此填入函數名就好，不用加括號
        console.log(new Date().valueOf());
    } else {
        console.log("done");
    }
}
setTimeout(incrementNumber,500);

1.七、系統對話框

function display_alert()
  {
     alert("I am an alert box!!")
  }

function disp_confirm()
  {
  var r=confirm("Press a button")
  if (r==true)
    {
       document.write("You pressed OK!")
    }
  else
    {
       document.write("You pressed Cancel!")
    }
}

function disp_prompt()
  {
  var name=prompt("Please enter your name","")
  if (name!=null && name!="")
    {
       document.write("Hello " + name + "!")
    }
  }

二、location對象

提供了當前窗口加載的文檔有關的信息，還提供了一些導航功能。這個對象既屬於window也屬於document。

主要的屬性以下：省略了location前綴

以下的地址：http://fanyi.baidu.com/?aldtype=85&keyfrom=alading&mod=collins#en/zh/alert

一、查詢字符串參數

/* 解析查詢字符串 返回包含全部參數的一個對象 */    
function getQueryStringArgs(){    
   //取得查詢字符串並去掉開頭的問號  
   var qs = (location.search.length > 0 ? location.search.substring(1) : '');   
   //保存數據的對象  
   args = {};    
   //取得每一項  
   var items = qs.length ? qs.split('&') : [],  
      item = null,  
      name = null,  
      //在for循環中使用  
      i = 0, len = items.length;    
   //逐個將每一項添加到args對象中  
   for(i = 0 ; i < len; i++){  
      item = items[i].split('=');  
      name = decodeURIComponent(item[0]);  //解碼的步驟，由於傳入url的參數都是通過編碼的，對應編碼encodeURIComponent()
      value = decodeURIComponent(item[1]);    
      if(name.length){  
         args[name] = value;  
      }  
   }  
   return args;  //返回一個對象
}

二、位置操做

location.assign("https://baidu.com");

或者以下的操做

//頁面定向
window.location = "https://baidu.com";
location.href = "https://baidu.com";

//重定向
location.replace("https://baidu.com");

//頁面刷新
window.location.reload(); //若是添加true就至關於win + R 清內存刷新

三、navigator對象

現已成爲識別瀏覽器的實際標準。

四、screen對象

五、history對象

經常使用方法go(number);可使用forword(); 和back();來替代

六、客戶端檢測 navigator

一、能力檢測

用以識別瀏覽器的能力，檢測方法的存在與否等。

if(docuemnt.getElementById){
    return document.getElementById(id);
}

二、怪癖檢測

三、用戶代理檢測

用來肯定使用的瀏覽器，一般使用navigator.userAgent屬性的值來判斷代理。

wenkit：2003年，Apple公司宣佈要發佈本身的Web瀏覽器，名safari，safari的呈現引擎叫WebKit，一個開源框架。

由於以上這段歷史，如今的User-Agent字符串變得一團糟，幾乎根本沒法彰顯它最初的意義。

追根溯源，微軟能夠說是這一切的始做俑者，但後來每個人都在試圖假扮別人，最終把User-Agent搞得混亂不堪。

獵豹瀏覽器
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.154 Safari/537.36 LBBROWSER"

chrome
"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2783.4 Safari/537.36"

firefox
"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0"

360
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36 QIHU 360SE"

個人手機的檢測信息

" Mozilla/5.0 (Linux; U; Android 6.0.1; zh-cn; MI 4LTE Build/MMB29M) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/46.0.2490.85 Mobile Safari/537.36 XiaoMi/MiuiBrowser/8.1.6"

某版本的ihone手機,safari

"Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25"

Win7+ie9：

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Win64; x64; Trident/5.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; Tablet PC 2.0; .NET4.0E)

經常使用到的瀏覽器檢測

/* 
    判斷瀏覽器名稱和版本 
    目前只能判斷:ie/firefox/chrome/opera/safari 
    2012年5月16日23:47:08 
    瀏覽器內核UA:UA; 
    瀏覽器內核名稱:NV.name; 
    瀏覽器內核版本:NV.version; 
    瀏覽器外殼名稱:NV.shell; 
*/  
var NV = {};  
var UA = navigator.userAgent.toLowerCase();  
try  
{  
    NV.name=!-[1,]?'ie':  
    (UA.indexOf("firefox")>0)?'firefox':  
    (UA.indexOf("chrome")>0)?'chrome':  
    window.opera?'opera':  
    window.openDatabase?'safari':  
    'unkonw';  
}catch(e){};  
try  
{  
    NV.version=(NV.name=='ie')?UA.match(/msie ([\d.]+)/)[1]:  
    (NV.name=='firefox')?UA.match(/firefox\/([\d.]+)/)[1]:  
    (NV.name=='chrome')?UA.match(/chrome\/([\d.]+)/)[1]:  
    (NV.name=='opera')?UA.match(/opera.([\d.]+)/)[1]:  
    (NV.name=='safari')?UA.match(/version\/([\d.]+)/)[1]:  
    '0';  
}catch(e){};  
try  
{  
    NV.shell=(UA.indexOf('360ee')>-1)?'360極速瀏覽器':  
    (UA.indexOf('360se')>-1)?'360安全瀏覽器':  
    (UA.indexOf('se')>-1)?'搜狗瀏覽器':  
    (UA.indexOf('aoyou')>-1)?'遨遊瀏覽器':  
    (UA.indexOf('theworld')>-1)?'世界之窗瀏覽器':  
    (UA.indexOf('worldchrome')>-1)?'世界之窗極速瀏覽器':  
    (UA.indexOf('greenbrowser')>-1)?'綠色瀏覽器':  
    (UA.indexOf('qqbrowser')>-1)?'QQ瀏覽器':  
    (UA.indexOf('baidu')>-1)?'百度瀏覽器':  
    '未知或無殼';  
}catch(e){}  
alert('瀏覽器UA='+UA+  
    '\n\n瀏覽器名稱='+NV.name+  
    '\n\n瀏覽器版本='+parseInt(NV.version)+  
    '\n\n瀏覽器外殼='+NV.shell);