JavaScript中的Window对象，BOM

1、Window对象

浏览器Bom的核心是Window对象，Window对象在浏览器中有两个身份，一个是以浏览器功能为主的JavaScript接口，一个是一JavaScript基础语法为主的Global对象(全局环境)。

1-1 全局Global对象

因为window对象被复用为ecmascript的global对象，所以声明(var)在全局的变量函数会变成全局的window对象的属性和方法。
如果·使用let const声明的全局变量，那么这些变量或者函数并不会添加给全局对象（global）。

通俗解释：
global是一个顶层对象，而window对象只是global对象的复用，意味着在window对象上我们可以访问到大部分的全局对象的属性和方法，使用var声明的变量或者函数（全局声明的）会被挂载在全局的window对象上，而使用let，const声明的全局变量会与全局对象的window脱钩，即在全局的window对象上是找不到声明的变量。最终使用let的全局变量和const会挂载在全局的script对象上。

? 如何看到script标签上全局变量？

注意！直接获取script标签对象是无法获取到的，而获取这个变量可以都过添加断点，然后再进入控制台的源代码区的右侧作用域栏看见所定义的变量，获取可以直接通过变量名获取

通过控制台获取

---

1-2 窗口关系

• window.top
  这个属性永远指向最上层窗口，即浏览器本身
• window.parent
  这个属性永远指向当前窗口的父窗口，如果当前窗口就是最顶层窗口，那么此时window.parent === window.top;
• window.self
  是终极的window属性，始终会指向window

---

1-3 窗口位置

window对象的位置可以通过不同的属性和方法确定。可以改变窗口的位置再屏幕的位置。

• screenLeft，screenTop可以获取到窗口相对于屏幕的位置 (兼容以前，现在使用(ele.pageXOffset ele.pageYOffset))
• moveTo(0,0)向上移动窗口位置
• moveBy(0,0)向下移动窗口位置

---

1-3 窗口大小

window中有四个属性可以确定当前浏览器的窗口大小

• innerWidth, innerHeight
  返回浏览器body部分的内容窗口大小，不包括浏览器工具栏，导航栏
• outerWidth, outerHeight
  返回浏览器窗口大小，包括工具栏和导航栏

• documentElement.clientWidth,documentElement.clientHeight
  这个属性可用于获取页面元素的宽度与高度(注意此种方式获取的元素宽高是不包含边框的，但是是包含内边距)

• documentElement.clientLeft,documentElement.clientTop
  这个属性可以获取到对象方向的页面元素的边框大小

• resizeTo(), resizeBy()
  此属性可调整window窗口大小, 此方法可能会在一些浏览器中被禁用（ie未禁用）

---

1-4 视口位置

• window.scroll(x , y)
  使用这个方法可以是页面向指定方法滚动多少像素

• window.scrollX, window.scrollY
  使用这个属性可以获取到浏览器页面被卷去的像素值

---

1-5 window.open()打开新的标签页

window.open可用于导航到指定url地址，也可用于打开新的标签页，此方法会返回一个引用方便控制新窗口

	window.open('http://www.baidu.com/');

此方法接收四个参数

• URL
  打开新窗口的地址

• frame
  指定打开一个已存在的窗口，会在对应的窗口中打开Url。
  也可以是特殊的窗口名，输入后子窗口的name属性被修改

_blank, _self, _top, _parent

若为空则打开一个新的窗口

• 特性字符串
  打开窗口的配置信息项，通过传入字符串的，= ，逗号间隔的数据来更改窗口的属性

fullscreen -> 表示窗口是否最大化
height -> 表示窗口的高度
width -> 表示窗口宽度
location -> 表示是否隐藏地址栏
Menubar -> 表示是否显示菜单栏
resizable -> 表示新窗口是否可以拖拽大小
scrollbars -> 表示是否可以在内容过长时滚动
status -> 是否显示状态栏
toolbars -> 是否显示工具栏
top -> 新窗口的y轴坐标
left -> 新窗口的x轴坐标

如

window.open('http://12···', '' , 'width = 123, height = 200, resizable = no , top = 200');

---

1-6 window.close()关闭新窗口

这个方法可用于关闭通过window.open打开的新窗口。
当使用window.close关闭窗口后，该窗口的引用依然存在，这可以使用closed属性来判断引用是否清除。

let myWindow = window.open('', '' ,'width = 200, height = 200 , toolbars = no');

关闭新窗口
setTimeout(() => {
	myWindow.close();
	//关闭后只剩下closed可以调用
	console.log(myWindow.closed);
	//true --》 已清除
}, 5000);

setTimeout(() => {
	window.close();
	//关闭最上层窗口
	console.log(window.top.closed);
	//true --》 已清除
}, 10000);

window.opener
新创建的窗口有一个属性opener指向创建它的窗口window对象

! 让新创建的窗口脱离父窗口到一个独立进程中

window.opener = null;

---

1-7 window事件

• onload()
  页面加载完毕后立即调用

window.addEventListener('load', () => {
	alert('页面加载完毕，已调用');
});

• DomContentLoaded
  页面html加载完成后立即调用

• onUnload
  退出页面时立即调用

 window.addEventListener('load', () => {
            alert('页面加载完毕，已调用');

            let zas = 123;
            function zasss() {
                console.log('1234');
            };
            zasss();
        });
        //创建页面
        let myW = window.open('', '', 'width = 300, height = 300');
        
        console.log(myW);
        //退出子窗口时触发弹窗
        myW.addEventListener('unload', () => {
            alert('退出页面');
        });

注意，在一般浏览器中通过js创建新窗口会被拦截（安全限制），上面代码效果可以通过关闭限制或者使用ie浏览器查看

通过ie浏览器查看效果
 window.onload = function () {
            alert('页面加载完毕，已调用');

            let zas = 123;
            function zasss() {
                console.log('1234');
            };
            zasss();
        }

        let myW = window.open('', '', 'width = 300, height = 300');

        console.log(myW);
        myW.onunload = function () {
            alert('退出页面');
        };

• onresize
  当浏览器视口大小发生变化时立即调用

window.addEventListener('resize', () => {
	console.log(this.innerWidth, this.outerWidth);
});

• onBeforeunload
  页面刷新或者关闭时调用

 window.onload = function () {
            alert('页面加载完毕，已调用');

            let zas = 123;
            function zasss() {
                console.log('1234');
            };
            zasss();
        }

        let myW = window.open('', '', 'width = 300, height = 300');

        // 刷新或关闭页面时调用
        myW.onbeforeunload = function () {
            alert('刷新了页面')
        }

• 更多

// 是判断当前页面是否活动
   window.onactivate = function() {
    alert("onactivate");
   }

   window.onbeforedeactivate = function () {
    alert("onbeforedeactivate");
   }
   
   window.oncontrolselect = function () {
    alert("oncontrolselect");
   }
   
   window.onscroll = function () {
    alert("onscroll");
   }
   
   window.onresizestart = function() {
    alert("onresizestart");    
   }
   
   window.onresizeend = function () {
    alert("onresizeed");
   }

   //控件有效/无效
   document.forms[0].controlName.disabled=false/true;
   

---

1-8 定时器

JavaScript本身是单线程语言，代码从上往下执行，遇到执行事件过长的代码会发生阻塞，如果使用定时器可以异步执行代码。

• setTimeout()
  延时定时器，接收两个参数，第一个参数是回调函数，第二个参数是延时时间（单位是毫秒）。在延时结束后会调用回调函数。
  如 3秒后关闭主窗口

	setTimeout(() => {
		window.close();
	}, 3000);

	setTimeout(() => {
		alert('页面即将关闭');
	}, 1000)

因为JavaScript是单线程的，为了代码的可调度性，JavaScript维护了一个任务队列，setTimeout的第二个参数只是为了让回调中的代码在指定时间时推入任务队列，任务队列遵循先入先出的特性，先推入的代码先执行，所以定时器函数推入的代码不一定是马上执行的，若队列前面有代码未执行，那么定时器的回调执行时间也会比指定执行的时间长。

• setInterval()
  循环定时器，和setTimeout参数一致，但是setInterval是每隔一段时间调用一次回调
  如 3秒一次打印@

setInterval(() => {
	console.log('@');
}, 3000);

循环定时器的回调在达到时间时也会被推入任务队列，假定3秒定时器在1:00处执行，那么1:03回调被推入队列，不会等到回调执行完在重新计时，也就是在1:06处会再次推入回调到队列，同理1:09,1：12，···

这两个定时器都会返回一个定时器唯一标识符ID，我们可以通过这个ID取消定时器。

• clearTimeout(), clearInterval()
  用于取消定时器，参数参入的是定时器唯一标识符ID。

如 取消3秒后的弹窗

let time = setTimeout(() => {
	alert('弹窗');
}, 3000);

clearTimeout(time);
并未执行弹窗

---

1-9 系统对话框

常见的有alert()，confirm()，prompt(), 除此之外还有find(), print();

• alert()
  普通提示弹窗

• confirm()
  确认弹窗

let isQuit = confirm('是否退出？');

此函数会返回一个布尔值，值取决于用户点击了确认？取消。对应返回true?false

• prompt()
  系统对话框
  接收两个参数，第一个是提示内容，第二个是默认输入文本(默认为空，可写空字符)

console.log(prompt('输入一段数值'));
console.log(prompt('输入一段数值', '2000'));

---

2 location对象

location是Bom中最有用的对象之一，提供了当前窗口加载的文档信息。以及通用的导航功能。
它既是window的对象，又是document的对象，也就是说window.location === document.location。

location可以用来解析地址栏的URL，也可用于重定向页面

一段正常的网址包含以下部分

• protocol => 通信协议(http,https, file,matio, ftp等)
• host => 主机(域名) 如www.baidu.com
• port => 端口号
• path => 路径 ；由 ‘/’ 号分隔开的多个字符串组成，表示主机的目录和文件地址
• query => 参数，以‘&’号分隔的多个键值对的数据

---

2-1 location属性

https://cn.bing.com/search?q=%E4%BD%A0%E5%A5%BD&form=CHRDEF&sp=-1&pq=%E4%BD%A0%E5%A5%BD&sc=8-2&qs=n&sk=&cvid=EB8BA9CDAC67443FAEF86DAA7B9D70B9#1234

• location.search
  用于获取完整的url查询字符串

	window.location.search;
	//'?q=%E4%BD%A0%E5%A5%BD&form=CHRDEF&sp=-1&pq=%E4%BD%A0%E5%A5%BD&sc=8-2&qs=n&sk=&cvid=EB8BA9CDAC67443FAEF86DAA7B9D70B9'

• location.href
  用于获取完整url地址

window.location.href;
//'https://cn.bing.com/search?q=%E4%BD%A0%E5%A5%BD&form=CHRDEF&sp=-1&pq=%E4%BD%A0%E5%A5%BD&sc=8-2&qs=n&sk=&cvid=EB8BA9CDAC67443FAEF86DAA7B9D70B9#1234'

• location.host
  获取服务器名及端口号

	window.location.host;
	//'cn.bing.com'

• location.origin
  获取url源地址

	window.location.origin;
	//'https://cn.bing.com'

• location.port
  获取请求的端口号

	window.location.port;
	//''

• location.hash
  获取url路径的散列值（url路径的’#'及其后面的部分）

	window.location.hash;
	//'#1234'

• location.hostname
  主机名，服务器名

	window.location.hostname;
	//'cn.bing.com'

• location.pathname
  地址中的路径值

	window.location.pathname;
	// '/search'

• location.protocol
  获取协议

	window.location.protocol;
	//'https:'

2-2 location方法

• assign()
  类似于location.href, 重定向，会产生历史记录

	window.location.assign('https://www.baidu.com/');

• replace()
  也是重定向方法，只不过不会产生历史记录

	window.location.replace('https://www.baidu.com');

• reload()
  刷新页面，里面的参数为布尔值，为true则强刷（刷新时不从缓存中获取数据），为false则普通刷新页面，可能从缓存中获取数据。默认false

	window.location.reload(true);

---

3 navigator对象

只要浏览器启用了JavaScript，那么window对象上就一定有navigator对象, navigator对象通常用于确定浏览器的类型

部分属性、方法	描述
appName	浏览器名称
appVersion	浏览器版本
language	浏览器主语言
locks	返回暴露web Locks APIS 的lockmanager对象
mediaDevices	返回可用的媒体设备
maxTouchPointer	返回设备触摸屏最大触点数
onLine	返回浏览器是否联网
oscpu	返回浏览器运行设备的操作系统和cpu
plugins	返回浏览器安装的插件数组
sendBeacon()	异步传输小数据
vibrate()	触发设备震动
····	····

常用属性navigator.userAgent
该属性可以返回由客户端返回服务器头部的user-agent值

window.navigator.userAgent;
//'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.82 Safari/537.36'

---

4 history对象

每个window都有自己的histroy对象，用于记录首次使用以来用户的导航历史记录

4-1 导航

• go()
  向前，向后导航到历史页，
  接收一个参数 num
  参数的正负值决定向前还是向后

	window.history.go(1);//向前一页
	window.history.go(-1);//后退一页

• back()
  页面向后导航

• foreward()
  页面向前导航

• history.pushState
  history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state

• history.relaceState
  replaceState()方法使用state objects, title,和 URL 作为参数， 修改当前历史记录实体，如果你想更新当前的state对象或者当前历史实体的URL来响应用户的的动作的话这个方法将会非常有用。

---

5 screen对象

window的一个对象，很少使用，用于保存客户端信息

属性	描述
availHeight	屏幕像素高度减去系统组件高度
availLeft	没有被系统组件占用的屏幕的最左侧像素
availTop	没有被系统组件占用的屏幕的最顶部像素
availWidth	屏幕像素宽度减去系统组件宽度
height	屏幕像素高度
width	屏幕像素宽度
left	当前屏幕左边的像素距离
top	当前屏幕顶边的像素距离