BOM那些事儿：关于浏览器对象的 secret

阿珊和她的猫

于 2024-09-27 09:00:00 发布

阅读量550

点赞数 14

文章标签：前端 BOM

本文链接：https://blog.csdn.net/weixin_42554191/article/details/142408130

版权

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

如何用代码操控浏览器?本文教你玩转浏览器窗口与导航！！

一、背景

BOM（Browser Object Model）是浏览器提供的一个对象模型，用于与浏览器的外部环境进行交互。与DOM（文档对象模型）不同，BOM 主要关注浏览器窗口、文档、历史记录和导航等功能。通过 BOM，开发者可以访问和控制浏览器窗口及其属性，从而实现丰富的用户体验和交互。

二、BOM的特点

跨平台性：BOM 是与浏览器相关的模型，不同浏览器可能实现略有差异，但大部分功能是跨平台的，开发者可以在多个浏览器中使用。
灵活性：BOM 提供多种方法和属性，让开发者能够根据需求灵活控制浏览器的行为，如打开新窗口、获取用户屏幕信息、操作浏览器历史等。
事件驱动：BOM 支持事件模型，允许开发者监听浏览器窗口的各种事件，如页面加载、窗口大小改变等。
全局对象：BOM 包含全局对象 window，它是所有其他对象的根节点。通过 window 对象，开发者可以访问浏览器的许多功能和属性。

三、BOM的应用案例

以下是一个简单的示例，演示如何使用 BOM 操作浏览器窗口和历史记录：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>BOM 示例</title>
</head>
<body>
    <h1>BOM 操作示例</h1>
    <button id="openWindow">打开新窗口</button>
    <button id="goBack">后退</button>

    <script>
        const openWindowButton = document.getElementById('openWindow');
        const goBackButton = document.getElementById('goBack');

        // 打开新窗口
        openWindowButton.addEventListener('click', () => {
            window.open('https://www.example.com', '_blank', 'width=600,height=400');
        });

        // 后退到上一个页面
        goBackButton.addEventListener('click', () => {
            window.history.back();
        });
    </script>
</body>
</html>