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);

ation 详细 X

基本翻译

结果”

网络释义

ation: 行为

compe ation: 补偿

conde ation: 冷凝

location [lə(ʊ)'keɪʃ(ə)n] location&type=1 详细 X

基本翻译

n. 位置（形容词locational）；地点；外景拍摄场地

网络释义

location: 位置

Point Location: 位置查询

Storage Location: 存储位置