BOM（Browser Object Model，浏览器对象模型）&& 客户端检测

1、window对象

BOM的核心对象是window，它表示浏览器的一个实例。

两重身份：

　　1、js访问浏览窗口的一个接口；

　　2、ECMAscript规定的Global对象。

1.1、全局作用域

在全局作用域中声明的变量和函数都会变成window对象的属性和方法。

全局作用域中this指向window，直接定义在window对象上的变量和方法可以删除，通过var在全局作用域中定义的变量或者方法不可以删除。

1.2、窗口关系及框架

页面中包含框架（iframe算一个），则每个框架都拥有自己的window对象，并且保存在frames集合中。

通过window.frames[0]或者window.frames["topFrame"]来引用上方的框架。而top.frames[0]指向最外层的框架，也就是浏览器窗口。

1.3、窗口位置，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.4、窗口大小 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.5、导航和打开窗口window.open()方法

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

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

可以使用window.moveTo(L,R);来移动窗口位置。

1.6、间歇调用与超时调用：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.7、系统对话框

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 + "!")
    }
  }

2、location对象

提供了当前窗口加载的文档有关的信息，还提供了一些导航功能。这个对象既属于window也属于document。

主要的属性如下：省略了location前缀

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

BOM（Browser Object Model，浏览器对象模型）&& 客户端检测

1、查询字符串参数

/* 解析查询字符串 返回包含所有参数的一个对象 */    
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;  //返回一个对象
}

2、位置操作

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 清内存刷新

3、navigator对象

现已成为识别浏览器的实际标准。

BOM（Browser Object Model，浏览器对象模型）&& 客户端检测

4、screen对象

BOM（Browser Object Model，浏览器对象模型）&& 客户端检测

5、history对象

BOM（Browser Object Model，浏览器对象模型）&& 客户端检测

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

6、客户端检测 navigator

1、能力检测

用以识别浏览器的能力，检测方法的存在与否等。

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

2、怪癖检测

3、用户代理检测

用来确定使用的浏览器，通常使用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);