BOM 知识

BOM 浏览器标准模型（H5标准化浏览器模型）

window

在浏览器环境中，window对象就是es中规定global对象，所以有权访问parseInt等方法

• 全局作用域
  由于window对象扮演es中global对象的角色，因此所有全局作用域中声明的属性、函数都会变成window对象的属性与方法

 var age =30
 function sayAge(){
   console.log(this.age,'左边')
 }
 console.log(sayAge()) // 29
 console.log(window.sayAge()) // 29

ps: 定义全局变量与window对象的区别，全局变量不能通过delete 删除，window对象上可以

  	var age =30
    window.name = 'tet';
    console.log(delete window.age); // 返回 false
    console.log(delete window.name);// 返回 true

原因：使用var语句添加的window属性有个名为[[configurable]]的特效，被赋值为false，所以不能删除
[[configurable]]是js内部值，目前js中还无法直接访问

导航打开新窗口

• 使用window.open
• window.open 返回新窗口的引用，可以对它进行操作，
• 可以根据返回的值是否为null来判断

var wroxWin = window.open('https://www.baidu.com/s?wd=http+304&ie=UTF-8','new','height=400,width=400,resizable=yes');

wroxWin.resizeTo(500,500); // 更改新的窗口

wroxWin.close(); // 关闭窗口，只针对window.open 创建的窗口有效

• 弹窗屏蔽程序 如果是自己触发的window.open,比如自己事件 则不会被系统浏览器屏蔽！ 否则如果是系统触发的比如fetch请求完毕，弹窗则会浏览器拦截

// 如果被浏览器或其他程序阻止弹窗。一般会抛出错误
var blocked = false
try{
	  // 这里的window.oepn 是自己触发
  var wroxWin = window.open('https://www.baidu.com/s?wd=http+304&ie=UTF-8','new','height=400,width=400,resizable=yes');
    if(wroxWin == null){
      console("弹窗被浏览器屏蔽了")
      blocked = true
    } 
}catch(ex){
	 blocked = true
}

if(blocked ===true){
  alert("弹窗被浏览器屏蔽了")
} 

间歇调用，超时调用

  window.setTimeout(fn,timer);

• 超时调用,第一个参数是方法

• 第二个参数表示等待多少时毫秒数执行，但经过该时间不一定执行。
  原因:js是单线程程序解析器，因此只能一段时间执行一段代码，为了控制要执行的代码，就有一个js任务队列。
  这些任务会把当前任务添加到队列的顺序执行
  setTimeout第二个参数表示多长时间后添加到队列里，如果队里为空马上执行，否则先等其他执行后再执行

    // 唯一id
     let timeoutId = window.setTimeout(function(){
  	 	console.log(this,'timeoutId')
     },0);
     clearTimeout(timeoutId); // 队列未执行时取消它，结果当做什么都会发生
  

间歇调用 setInterval()

  var num = 0;
  var max = 10;
  var intervalId = null;
  function incrementNumber(){
  	  num++;
  	  if(num == max){
  	  	console.log(num);
  	  	clearInterval(intervalId);
  	  }
  }

  intervalId = setInterval(incrementNumber,500);

间歇调用改造成超时调用

 var num = 0;
 var max = 10;
 var intervalId = null;
 function incrementNumber(){
 	  num++;
 	  if(num > max){
 	  	console.log(num);
 	  
 	  }else{
 	  	   setTimeout(incrementNumber,500);
 	  }
 }

 setTimeout(incrementNumber,500);

window.location 查询文档url属性

显示当前文档相关信息 window.location === document.location

• location.href 浏览器生成一条心的记录

  location.hash = '#32323'   
  location.href('https://www.baidu.com/s?wd=class+严格模式&ie=UTF-8')

每次修改location的属性（陈hash外），页面都会以新的url重新加载

navigator 象包含有关浏览器的信息

 console.log(window.navigator)
 // 检测插件
 console.log(window.navigator.plugins)
 console.log(Array.isArray(window.navigator.plugins))
 for (var i = 0; i < window.navigator.plugins.length; i++) {
     console.log(window.navigator.plugins[i])
 }

• 客户端检测

• 能力检测 识别浏览器的能力，而不是检测浏览器的特定能力 在编写代码之前先检测特定浏览器的能力。 采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。能力检测的基本模式如下

 if (object.propertyInQuestion){
      // 使用object.propertyInQuestion
 }

** 可靠的能力检测
不要这样做！这不是能力检测——只检测了是否存在相应的方法



function isSortable(object){
     return !!object.sort;
 }

// *这个函数通过检测对象是否存在sort()方法，来确定对象是否支持排序。问题是，任何包含sort属性的对象也会返回true。*
// var result = isSortable({ sort: true });
// /**检测某个属性是否存在并不能确定对象是否支持排序。更好的方式是检测sort 是不是一个函数。**/
// //这样更好：检查sort 是不是函数
// function isSortable(object){
//     return typeof object.sort == "function";
// }

// 例子 检测浏览器某种方法是否存在

 function isSordable(obj){
    return typeof obj.sort == 'function'
 }

* 怪癖检测（bug检测）


* 用户代理检测

 console.log(window.navigator.userAgent)

### screen对象 处理屏幕信息等

### history  上网记录

history.go() history.back()