文章目录

• 1、Window对象
• • 1-1 全局Global对象
  • 1-2 窗口关系
  • 1-3 窗口位置
  • 1-3 窗口大小
  • 1-4 视口位置
  • 1-5 window.open()打开新的标签页
  • 1-6 window.close()关闭新窗口
  • 1-7 window事件
  • 1-8 定时器
  • 1-9 系统对话框
• 2 location对象
• • 2-1 location属性
  • 2-2 location方法
• 3 navigator对象
• 4 history对象
• • 4-1 导航
• 5 screen对象

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标签上全局变量？

通过控制台获取

1-2 窗口关系

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

1-3 窗口位置

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

• screenLeft，screenTop可以获取到窗口相对于屏幕的位置
• 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属性被修改

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

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

如

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('退出页面');
        });

通过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)

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

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

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

• clearTimeout(), setInterval()
  用于取消定时器，参数参入的是定时器唯一标识符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。

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

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

2-1 location属性

• 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对象通常用于确定浏览器的类型

常用属性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的一个对象，很少使用，用于保存客户端信息