BOM编程

凊野

已于 2024-06-18 20:23:56 修改

阅读量626

点赞数 13

分类专栏： JavaWeb 文章标签： javascript 开发语言 ecmascript html 前端

于 2024-05-20 16:14:19 首次发布

本文链接：https://blog.csdn.net/HL031125/article/details/139067439

版权

JavaWeb 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1. 什么事BOM编程

2. window对象的常见属性

2.1 window.innerHeight 和 window.innerWidth

3.1 alert()、confirm() 和 prompt()

3.2 open() 和 close()

3.3 setTimeout() 和 setInterval()

5. 通过BOM编程实现会话级和持久级数据存储

在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开发者工具的应用程序栏,可以查看数据的状态

凊野

关注

13
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
BOM编程

BOM是Browser Object Model的简写，即浏览器对象模型。BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法(通过window对象及属性的一系列方法控制浏览器行为的一种编程)BOM没有统一的标准(每种客户端都可以自定标准)。BOM编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程
复制链接

扫一扫