高级JavaScript #BOM(window , history ,location ,navigator)

BOM: Browser Object Model
浏览器对象模型

专门操作浏览器软件和窗口的一套对象和函数的集合

window对象：

1.代替ES标准中的global,充当全局作用域;
2.保存原生的：JS 
3.保存浏览器窗口相关的信息和功能，代表着当前浏览器窗口.
  (1)window可获得当前窗口的大小: 2组大小： 
	a. 完整窗口大小:        window.outerWidth  window.outerHeight
	b. 仅内部文档显示区大小: window.innerWidth  window.innerHeight
	c. 示例:
	  <script>
    //想实时获得当前窗口大小
    //当窗口重新修改大小时，自动触发
    window.onresize=function(){
      console.log(`完整窗口大小:${window.outerWidth}x${window.outerHeight}`);
      console.log(`仅文档显示区大小:${window.innerWidth}x${window.innerHeight}`);
    }
  </script>
  (2). 还可以打开和关闭窗口:
	a. window.open()  打开一个新窗口
	b. window.close()  关闭当前窗口

4.打开新链接的方式：
	a.在当前窗口打开新链接，可以后退:HTML: <a href="url" target="_self">    JS:window.open("url", "_self");
	b.在当前窗口打开新链接，禁止后退:JS : location.replace("新url");
	c.在新窗口打开新链接，可同时打开多个:HTML: <a href="url" target="_blank"> JS:window.open("url", "_blank")
	d.在新窗口新链接,同一时刻只能打开一个:HTML: <a href="url" target="自定义窗口名">  JS: window.open("url", "自定义窗口名")

history对象

当前窗口打开后，专门保存当前窗口成功访问过的所有url的历史记录数组
在history中，有一个"指针"，默认指向浏览器当前正在看的新的url。但是可以通过前进后退操作，移动指针查看以往浏览过的旧的url地址。
如何: 
	(1). history.go(1) 前进一步
	(2). history.go(-1)后退一步
	(3). history.go(0) 刷新页面

location对象

保存当前窗口正在打开的url的信息的对象。并且location还提供了有些执行跳转操作的函数
何时: (1). 想获得当前窗口正在打开的地址栏中的url信息时 
    location对象分段保存了url各个部分的信息：
	a.location.href 完整的url
	b.protocol  协议
	c.host  主机名+端口号
	d.hostname   主机名
	e.port  端口号
	f.pathname  相对路径
	g.search   ?及其之后的查询字符串
	h.hash   #及其之后的锚点地址
执行一些跳转操作： 
	a. location.assign("新url") 也能实现在当前窗口打开新链接，可后退
			 赋值
      location.href="新url" 也行 
	  location="新url" 也行
	b. location.replace("新url") 实现在当前窗口打开新链接，禁止后退
	c. location.reload() 刷新页面

(2).执行一些跳转操作时
	a. location.assign("新url") 也能实现在当前窗口打开新链接，可后退
			 赋值
      location.href="新url" 也行 
	  location="新url" 也行
	b. location.replace("新url") 实现在当前窗口打开新链接，禁止后退
	c. location.reload() 刷新页面

navigator
专门保存当前浏览器配置信息的对象 希望获得浏览器的配置信息时

(1)navigator.userAgent 保存了当前浏览器的名称、内核、版本号等信息。如果希望获得当前浏览器的名称、内核、版本号时，都可用userAgent属性
(2). navigator.plugins 保存当前浏览器已经安装的插件信息的集合
	如何判断浏览器是否安装某个插件: 
	if(navigator.plugins["完整插件名"]!==undefined){
		说明已安装该插件
	}else{
		说明未安装该插件
	}