目录
2.1 window.innerHeight 和 window.innerWidth
3.1 alert()、confirm() 和 prompt()
3.3 setTimeout() 和 setInterval()
在Web开发中,除了操作文档对象模型(DOM),浏览器对象模型(BOM)也同样重要。BOM提供了与浏览器交互的接口,允许开发者控制浏览器窗口、导航历史记录和其他浏览器功能。本篇博客将介绍BOM编程的基础知识、常见的window对象属性和方法,并演示通过BOM编程控制浏览器行为及实现会话级和持久级数据存储。
1. 什么事BOM编程
-
BOM是Browser Object Model的简写,即浏览器对象模型。
-
BOM由一系列对象组成,是访问、控制、修改浏览器的属性和方法(通过window对象及属性的一系列方法 控制浏览器行为的一种编程)
-
BOM没有统一的标准(每种客户端都可以自定标准)。
-
BOM编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程
-
BOM编程的对象结构如下
-
window 顶级对象,代表整个浏览器窗口
-
location对象 window对象的属性之一,代表浏览器的地址栏
-
history对象 window对象的属性之一,代表浏览器的访问历史
-
screen对象 window对象的属性之一,代表屏幕
-
navigator对象 window对象的属性之一,代表浏览器软件本身
-
document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档
-
console对象 window对象的属性之一,代表浏览器开发者工具的控制台
-
localStorage对象 window对象的属性之一,代表浏览器的本地数据持久化存储
-
sessionStorage对象 window对象的属性之一,代表浏览器的本地数据会话级存储
-
-
2. window对象的常见属性
window
对象是BOM的核心,它表示浏览器窗口或框架。以下是一些常见的window
对象属性:
2.1 window.innerHeight
和 window.innerWidth
- 解释:获取窗口的内部高度和宽度(即内容区域,不包括工具栏和滚动条)。
示例:
console.log("Window inner height: " + window.innerHeight);
console.log("Window inner width: " + window.innerWidth);
2.2 window.location
- 解释:表示当前页面的URL,可以用来获取或设置URL的各部分。
示例:
console.log(window.location.href); // 获取完整的URL
window.location.href = 'https://www.example.com'; // 重定向到新的URL
2.3 window.navigator
- 解释:包含有关浏览器的信息,如用户代理、平台等。
示例:
console.log(window.navigator.userAgent); // 获取用户代理字符串
console.log(window.navigator.platform); // 获取操作系统平台信息
2.4 window.history
- 解释:提供对浏览器历史记录的访问。
示例:
console.log(window.history.length); // 获取历史记录中的条目数
3. window对象的常见方法
window
对象提供了多种方法来控制和操作浏览器行为。以下是一些常见的方法:
3.1 alert()
、confirm()
和 prompt()
- 解释:用于显示警告框、确认框和提示框。
示例:
window.alert('This is an alert box!');
const result = window.confirm('Do you agree?');
const userInput = window.prompt('Please enter your name:');
3.2 open()
和 close()
- 解释:用于打开和关闭浏览器窗口。
示例:
const newWindow = window.open('https://www.example.com', '_blank');
newWindow.close(); // 关闭新打开的窗口
3.3 setTimeout()
和 setInterval()
- 解释:用于延时执行代码和周期性执行代码
示例:
setTimeout(() => {
console.log('This runs after 3 seconds');
}, 3000);
const intervalId = setInterval(() => {
console.log('This runs every 2 seconds');
}, 2000);
// 停止间隔执行
clearInterval(intervalId);
4. 通过BOM编程控制浏览器行为演示
通过BOM编程,我们可以实现各种有趣的功能,比如自动重定向用户或调整窗口大小。以下是一些示例:
4.1 自动重定向用户
- 解释:使用
window.location
对象重定向用户到另一个页面。
示例:
window.location.href = 'https://www.example.com';
4.2 弹出确认框并根据用户选择进行操作
- 解释:结合
window.confirm
方法和条件判断来执行不同的操作
示例:
if (window.confirm('Do you want to visit Example.com?')) {
window.location.href = 'https://www.example.com';
} else {
console.log('User chose to stay on the current page.');
}
4.3 调整浏览器窗口大小
- 解释:使用
window.resizeTo
方法调整浏览器窗口的尺寸。
window.resizeTo(800, 600);
5. 通过BOM编程实现会话级和持久级数据存储
-
会话级数据 : 内存型数据,是浏览器在内存上临时存储的数据,浏览器关闭后,数据失去,通过window的sessionStorge属性实现
-
持久级数据 : 磁盘型数据,是浏览器在磁盘上持久存储的数据,浏览器关闭后,数据仍在,通过window的localStorge实现
-
可以用于将来存储一些服务端响应回来的数据,比如:token令牌,或者一些其他功能数据,根据数据的业务范围我们可以选择数据存储的会话/持久 级别
-
测试,存储数据后,再读取数据,然后关闭浏览器,获取数据,发现sessionStorge的数据没有了,localStorge的数据还在
-
通过removeItem可以将这些数据直接删除
-
在F12开发者工具的应用程序栏,可以查看数据的状态