<script>
	// 获取浏览器可见内容区域宽高
	var width = window.innerWidth;
	var height = window.innerHeight;
	console.log('width: ', width)
	console.log('height: ', height)
</script>

内容可见区域的宽高如下所示：

当浏览器的窗口大小发生变化时候，它的内容可见区域的宽高也会变化。

1.3、浏览器弹出层

（1）alert弹出框

【alert()】是window对象的一个方法，这个方法的作用就是弹出一个提示框，alert()方法会阻塞它后面的所有代码的执行，只有点击确定之后才可以继续执行后面的代码。【alert()】方法没有返回值，如果我们接收它的返回值，只会是一个undefined。

<script>
	// 弹出框
	var res = window.alert("这是浏览的弹出框");
	console.log('res===>: ', res);
</script>

alert弹出框效果如下所示：

以上，就是alert()方法的使用，这个方法在实际开发中不常用。

（2）confirm询问框

confirm()方法可以弹出一个询问框，此时会有两个选项，一个确定，一个取消。点击确定，返回true，点击取消，返回false。

<script>
	// 询问框
	var res = window.confirm("这是浏览的询问框");
	console.log('res===>: ', res);
	if (res) {
		console.log('点击了确定');
	} else {
		console.log('点击了取消');
	}
</script>

询问框的效果如下所示：

询问框在实际开发中，也是不常用的，因为不同的浏览器，会有不同的显式效果。

（3）prompt输入框

prompt()方法可以实现一个输入框的效果，prompt弹出一个输入框，用户输入的内容可以通过该方法的返回值获取到。当没有输入内容的时候，点击确定按钮，prompt()方法返回值是null，点击取消按钮，返回空字符串；如果有输入内容，那么返回值是输入的内容字符串。

<script>
	// 输入框
	var res = window.prompt("请输入内容");
	console.log('res===>: ', res);
	if (res) {
		console.log('输入的内容是: ', res);
	} else {
		console.log('没有输入内容');
	}
</script>

输入框的效果如下所示：

以上所有的弹出层方法，都会阻塞JS代码的执行。

1.4、获取浏览器地址栏信息

通过window对象中的location属性可以获取到浏览器地址栏的所有信息，location对象里面有如下属性和方法：

下面看下常见的location属性和方法。

（1）href属性

通过【location.href】可以获取到当前浏览器页面的地址。

<script>
	var url = window.location.href;
	console.log('url: ', url)
</script>

获取到的地址信息如下所示：

也可以通过给【location.href】属性赋值，实现页面的跳转功能。

（2）reload()刷新页面

reload()方法是刷新当前浏览器页面的功能。

<button id="btn">刷新当前页面</button>
<script>
	btn.onclick = function () {
		// 刷新当前页面
		window.location.reload();
	}
</script>

1.5、window常用事件

（1）onload事件

window对象中，提供了一个【onload()】方法，它的主要作用是在HTML所有的DOM元素渲染完成之后，就会执行onload()方法。也就是说，onload()方法是在页面中所有的资源（包括：图片、视频、dom元素）全部加载完成之后执行的。

<script>
	window.onload = function () {
		// 页面加载完成啦
		console.log('页面加载完成啦')
	}
	// 模拟页面还没有加载完成
	alert('阻塞执行')
</script>

运行上面的代码，可以看到如果不点击弹出框，控制台是不会输出log日志的。

（2）onresize事件

onresize()方法是浏览器窗口大小发生改变的时候才会执行。通过onresize()方法可以实现监听浏览器窗口大小的变化，例如：响应式布局。

<script>
	window.onresize = function () {
		// 浏览窗口大小发生改变
		console.log('浏览窗口大小发生改变')
	}
</script>

调整浏览器的窗口大小，此时可以在控制台看到对应的日志输出。

（3）onscroll事件

onscroll()方法可以监听浏览器滚动条的事件，当我们滚动页面的时候，就会触发onscroll()方法，通过onscroll()方法，可以监听滚动事件，然后通过DOM提供的属性，可以获取到滚动的距离。

<style>
	body {
		height: 2000px;
	}
</style>
<script>
	window.onscroll = function () {
		// 触发滚动事件
		console.log('触发滚动事件')
	}
</script>

获取纵向滚动的距离：

document.documentElement.scrollTop：滚动条上下滚动的距离（这个属性是html5提供的，页面里面需要添加<!DOCTYPE html>）。
document.body.scrollTop：滚动条上下滚动的距离。

获取横向滚动的距离：

document.documentElement.scrollLeft：获取滚动条左右滚动的距离。
document.body.scrollLeft：获取滚动条左右滚动的距离。

<style>
	body {
		height: 2000px;
        width: 2000px;
	}
</style>
<script>
	window.onscroll = function () {
		// 触发滚动事件
		console.log('触发滚动事件')
		// 获取滚动的距离
		// 这里的写法可以兼容各种浏览
		var dist = document.documentElement.scrollTop || document.body.scrollTop;
		console.log('上下滚动的距离是: ', dist)
		// 横向滚动距离
		var dist = document.documentElement.scrollLeft || document.body.scrollLeft;
		console.log('左右滚动的距离是: ', dist)
	}
</script>

效果如下所示：

（4）scrollTo()事件

scrollTo()方法可以实现滚动到指定的位置，它需要两个参数，分别是表示滚动后的（x,y）坐标。scrollTo()方法可以有两种参数，分别如下所示：

scrollTo()方法两种写法：

scrollTo(x,y)：这种是直接传递两个参数，表示x，y的坐标。
scrollTo({ left: 0, top: 0 })：这里是传递一个对象，left表示x坐标，top表示y坐标。

<style>
	body {
		height: 2000px;
        width: 2000px;
	}
	div {
		height: 300px;
	}
</style>
	<div></div>
	<button id="btn">回到顶部</button>
	<button id="btn2">回到顶部2</button>
<script>
	btn.onclick = function() {
		// 回到顶部
		window.scrollTo(0,0);
	}
	btn2.onclick = function() {
		// 回到顶部
		window.scrollTo({
			left: 0,
			top: 0
		});
	}
</script>

运行JS程序，点击按钮之后，可以看到滚动条自己滚动到顶部了。

1.6、打开关闭标签页

JS中的BOM对象中，提供了打开和关闭新的标签页的方法功能，下面分别看下如何打开新的标签页，关闭当前标签页。

（1）open打开新的标签页

JS中提供了【window.open(url)】方法，可以用于打开一个新的标签页，并且跳转到对应的url地址。

<button id="btn">打开百度页面</button>
<script>
	btn.onclick = function() {
		// 打开新的标签页
		window.open("http://www.baidu.com");
	}
</script>

效果如下所示：

（2）close关闭当前标签页

既然可以打开标签页，当然也可以关闭标签页啦，但是JS里面只能关闭当前的标签页，通过JS中的【window.close()】方法可以关闭当前的标签页。因为对于当前标签页来说，其他的标签页已经脱离了当前标签页的控制，所以不能被当前标签页关闭。

<button id="btn">关闭当前标签页</button>
<script>
	btn.onclick = function() {
		// 关闭当前标签页
		window.close();
	}
</script>

页面效果如下，点击按钮之后，当前的标签页会被关闭。

1.7、浏览器的历史记录

每一个浏览器都具有记录访问记录的功能，通过浏览器的前进和后退的按键，可以返回到上一个页面，进入到下一个页面的功能，这就是浏览器的历史记录。下面看下JS中BOM对象模型提供的关于历史记录的相关方法。

JS中的历史记录是保存在【window对象】中的【history对象】里面，我们可以通过history对象的相关方法，实现页面的前进和后退的功能。注意：使用history对象方法时候，必须保证存在历史记录，否则相应的方法不生效（也就是说，需要先访问过一些页面之后，才会会上一个页面，下一个页面的历史记录）。

（1）forward进入下一个页面

JS中提供了【window.history.forward()】方法，可以前进到下一个已经访问的页面，如果不存在下一个页面，则保持在当前页面。

<button id="btn">进入下一个页面</button>
<script>
	btn.onclick = function() {
		// 进入下一个页面
		window.history.forward();
	}
</script>

（2）back返回上一个页面

JS提供了【window.history.back()】方法，可以返回到上一个已经访问的页面，如果不存在，则不发生跳转。

<button id="btn">返回上一个页面</button>
<script>
	btn.onclick = function() {
		// 返回上一个页面
		window.history.back();
	}
</script>

（3）go返回或前进n个页面

上面forward()和back()两个方法，它们只能返回或者前进一个页面，如果要前进或者返回多个页面，那么就需要使用JS中提供的【window.history.go(n)】方法，go()方法需要传递一个数值，这个数值表示前进或者返回的页面数量，如果【n>0】表示前进n个页面，如果【n<0】表示返回n个页面。

注意：如果go()方法能够返回或者前进到n个页面，那么正常进行跳转，如果历史记录里面页面前进或者返回的页面小于n，那么就保持不变，还是在当前页面。

<button id="btn">返回上2个页面</button>
<script>
	btn.onclick = function() {
		// 返回上2个页面
		window.history.go(-2);
	}
</script>

1.8、浏览器本地存储

浏览器提供了在本地存储数据的功能，可以通过window对象中的【localStorage】或者【sessionStorage】对象进行数据的存储，【localStorage】和【sessionStorage】两种本地存储的方法都是一样的，两种的区别是：

localStorage保存的数据即使关闭浏览器、重启电脑之后，都不会丢失；
sessionStorage保存的数据只能够在当前浏览器的会话里面，关闭当前tab页签、关闭浏览器就会导致数据丢失。

（1）setItem()保存数据

setItem()方法用于保存key-value格式的数据，用法：【window.localStorage.setItem(key, value)】。localStorage对象只能够保存字符串数据，如果要保存对象、数组类型的数据，可以使用JS中提供的【JSON.stringify()】方法，首先将对象、数组转换为字符串，再通过setItem()方法进行保存。

<button id="btn">localStorage保存数据</button>
<script>
	btn.onclick = function() {
		// 保存
		window.localStorage.setItem("data", "JavaScript");
		// 保存对象
		var obj = {
			name: "张三",
			age: 20
		};
		window.localStorage.setItem("obj", JSON.stringify(obj));
	}
</script>

点击保存按钮之后，可以通过F12打开浏览器控制台，找到【Application】里面找到【localStorage】查看保存的数据。

（2）getItem()获取数据

getItem()方法可以获取对应key的value值，用法：【window.localStorage.getItem(key)】，返回是字符串类型的数据。localStorage保存的数据都是字符串类型，如果是对象、数组字符串，可以通过【JSON.parse()】方法，将字符串类型的对象、数组转换为真正的对象、数组类型。

<button id="btn2">localStorage获取数据</button>
<script>
	btn2.onclick = function() {
		// 获取
		var res = window.localStorage.getItem("data");
		console.log(res)
		var objStr = window.localStorage.getItem("obj");
		var obj = JSON.parse(objStr);
		console.log(obj)
	}
</script>

（3）removeItem()删除数据

removeItem()方法是用于删除指定key的值，用法：【window.localStorage.removeItem(key)】。

<button id="btn3">localStorage删除数据</button>
<script>
	btn3.onclick = function() {
		// 删除
		window.localStorage.removeItem("data");
	}
</script>

（4）clear()清空所有数据

clear()方法可以清空localStorage中的所有数据，用法：【window.locaStorage.clear()】。

<button id="btn4">localStorage清空数据</button>
<script>
	btn4.onclick = function() {
		// 清空
		window.localStorage.clear();
	}
</script>

综上，这篇文章结束了，主要介绍JavaScript中的BOM对象及其常见的BOM相关操作。

猜你喜欢

Onvif协议及协议测试工具使用详解
数据中心——Vxlan基本概念1
[Typescript] Using type predicates
NBUT 1225 NEW RDSP MODE I
复选框的全选和取消
【SRM 716 DIV 1 A】 ConstructLCS
reactos操作系统实现(179)
Mysql入门技能树-数据类型
微服务之springCloud-docker-feign-hystrix（六）
理性看待自动化测试优缺点，说说我对自动化测试的理解
HashMap、HashTable、LinkedHashMap和TreeMap用法和区别
Cocos2d-x Lua中多场景切换生命周期
指定DIV局部刷新的简单实现，很简单，但是网上搜到的大部分都很复杂
PHP7：10件事情你需要知道的
Windows 10桌面美化-任务栏透明StartlsBack工具
聊天信息框显示消息
转行网络安全月薪2万，怎么做到的？
一步完成 MySQL 向 Redis 迁移
Git分支管理策略
Javascript之旅——第二站：对象和数组
wxWidgets多线程技术（分离式建立于堆上HEAP；联合式可以建在STACK堆、栈上）

相关主题

Node.js笔记
Vue.js学习笔记（二）
vue.js 基础
笔记笔记

zl程序教程

当前栏目

【JS笔记】JS中的BOM对象及其常见的BOM相关操作

一、BOM对象

1.1、什么是BOM

1.2、获取浏览器窗口大小