BOM编程

BOM编程

BOM（Browser Object Model）是指浏览器对象模型，它提供了与浏览器窗口进行交互的对象和方法

BOM的组成部分

• Window对象：代表浏览器窗口，是BOM的顶层对象，包含了全局的属性和方法。
• Navigator对象：提供关于浏览器的信息，比如浏览器的名称、版本等。
• Screen对象：提供关于用户屏幕的信息，比如屏幕的高度、宽度等。
• Location对象：代表当前窗口的URL信息，可以用来获取或设置浏览器的URL。
• History对象：代表浏览器的历史记录，可以用来在浏览历史记录中前进或后退。
• Document对象：代表当前加载的文档，可以用来操作文档的内容和结构。

BOM的常见应用

• 操作浏览器窗口：可以通过BOM来控制浏览器窗口的大小、位置等属性。
• 处理浏览器事件：可以利用BOM来捕获和处理浏览器事件，比如点击事件、滚动事件等。
• 操作浏览器历史记录：可以使用BOM来管理浏览器的历史记录，实现前进、后退等功能。
• 获取浏览器信息：可以通过BOM获取浏览器的信息，比如浏览器类型、版本等。
• 控制页面跳转：可以使用BOM来控制页面的跳转和重定向。

常用Window对象的API

三种弹窗

• Window.alert() - 显示一个带有指定消息和一个“确定”按钮的警告框。
• Window.confirm() - 显示一个带有指定消息以及“确定”和“取消”按钮的对话框。
• Window.prompt() - 显示一个提示框，要求用户输入文本。

打开关闭窗口

• Window.open() - 打开一个新的浏览器窗口或新标签页。
• Window.close() - 关闭当前窗口。
• Window.location - 提供有关当前 URL 的信息并允许跳转到新的 URL。

定时执行

• Window.setTimeout() - 在指定的毫秒数后执行指定的函数。
• Window.setInterval() - 每隔指定的毫秒数重复执行指定的函数。

其它

• Window.document - 表示当前窗口中载入的文档。
• Window.localStorage - 提供了访问当前域名下的本地存储功能，可以存储键值对数据。

window对象常见属性的常用方法

window.history:

• window.history 对象允许你与浏览器的历史记录进行交互。
• 使用 history.back() 和 history.forward() 方法来在历史记录中向后或向前导航。
• history.length 属性可以获取历史记录中的条目数量。

window.location:

• window.location 对象包含有关当前 URL 的信息，并允许你与浏览器的地址栏进行交互。
• location.href 获取当前页面的 URL，也可以设置新的 URL 来导航到其他页面。
• 可以使用 location.reload() 方法重新加载当前页面。

window.sessionStorage

• 会话级别存储:
• sessionStorage 存储的数据仅在当前会话期间有效。会话期间指的是用户在浏览器标签或窗口中保持打开状态的时间段。
• 当用户关闭浏览器标签或窗口时，sessionStorage 中存储的数据会被清除。
• 使用方法:
  • 通过 sessionStorage.setItem(key, value) 方法来存储数据。
  • 通过 sessionStorage.getItem(key) 方法来获取存储的数据。
  • 可以使用 sessionStorage.removeItem(key) 方法来删除特定键的数据。
• 示例:

// 存储数据到 sessionStorage
sessionStorage.setItem('username', 'John Doe');

// 获取存储的数据
const username = sessionStorage.getItem('username');
console.log(username); // 输出: John Doe

localStorage:

• 永久性存储:
• localStorage 存储的数据在用户关闭浏览器后仍然有效，它们会永久保存在用户的浏览器中，直到被显式删除。
• 不同于 sessionStorage，localStorage 中的数据不会因为会话结束而丢失。
• 使用方法:
  • 通过 localStorage.setItem(key, value) 方法来存储数据。
  • 通过 localStorage.getItem(key) 方法来获取存储的数据。
  • 使用 localStorage.removeItem(key) 方法来删除特定键的数据。
• 示例:

// 存储数据到 localStorage
localStorage.setItem('theme', 'dark');

// 获取存储的数据
const theme = localStorage.getItem('theme');
console.log(theme); // 输出: dark

BOM编程实例

// 获取浏览器窗口的宽度和高度
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

// 弹出一个确认框
var result = window.confirm("确定要删除吗？");
if (result) {
    // 执行删除操作
}

// 跳转到指定页面
window.location.href = "https://www.example.com";

// 前进或后退
window.history.forward();
window.history.back();