〖大前端 - 基础入门三大核心之JS篇㊼〗- BOM基础之window对象

news2025/1/20 22:02:10

说明：该文属于大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！
作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作，目前在公司担任研发部门CTO。
荣誉：2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。

🏆 白宝书系列
🏅 启示录 - 攻城狮的自我修养
🏅 Python全栈白宝书
🏅 ChatGPT实践指南白宝书
🏅 产品思维训练白宝书
🏅 全域运营实战白宝书
🏅 大前端全栈架构白宝书

文章目录

⭐ BOM
- 🌟 window对象
- 🌟 navigator对象
- 🌟 history对象
- 🌟 location对象

⭐ BOM

BOM（Browser Object Model，浏览器对象模型）是JS与浏览器窗口交互的接口

一些与浏览器改变尺寸、滚动条滚动等相关的特效，都需要借助BOM技术

🌟 window对象

window对象是当前JS脚本运行所处的窗口，而这个窗口中包含DOM结构，window.document属性就是document对象

在有标签页功能的浏览器中，每个标签都拥有自己的window对象；也就是说，同一个窗口的标签页之间不会共享一个window对象

全局变量是winddow的属性
示例代码：

var a = 10;
console.log(window.a);  //10

这就意味着，多个js文件之间是共享全局作用域的，即js文件没有作用域隔离功能。全局变量是window属性是js建立的一种的机制，多个js文件可以共同作用这些全局变量，使用起来更加的方便。

内置函数普遍是window的方法

不仅仅是全局变量，内置函数普遍是window的方法。比如alert()、setInterval()等内置函数，普遍是window的方法

示例代码：

console.log(window.alert == alert); //true
console.log(winddow.setInterval == setInterval); //true

console.log(window.hasOwnProperty('setInterval'));  //true，hasOwnProperty返回是否具有指定名称的属性/方法

window.setInterval(function () {    //可以用window打点调用内置函数
    console.log('你好')
}, 2000);

window中关于窗口尺寸相关属性

属性	意义
windinnerHeight	浏览器窗口的内容区域的高度，包含水平滚动条（如果有的话）
innerWidth	浏览器窗口的内容区域的宽度，包含垂直滚动条（如果有的话）
outerHeight	浏览器窗口的外部高度
outerWidth	浏览器窗口的外部宽度

获得不包含滚动条的窗口宽度，要用documnet.documentElement.clientWidth

示例代码：获得窗口的内宽、外宽、不包含滚动条的内宽

console.log("浏览器内宽(包含滚动条)：" + window.innerWidth);
console.log("浏览器外宽：" + window.outerWidth);
console.log("浏览器内宽(不包含滚动条)：" + document.documentElement.clientWidth);

当浏览器窗口最大化时，浏览器内宽和浏览器外宽值是一样的（都不包含浏览器的边框），当把浏览器窗口缩小，浏览器的外宽就会大一些，因为多了一个浏览器的边框：

当窗口最大化时：

当窗口缩小时：

resize事件

在窗口大小改变之后，就会触发resize事件，可以使用window.onresize或者window.addEventListener(‘resize’)来绑定事件处理函数

示例代码：给窗口改变尺寸添加事件监听

//监听窗口尺寸改变
window.onresize = function () {
    console.log("浏览器窗口的内高：" + window.innerHeight);
    console.log("浏览器窗口的外高：" + window.outerHeight);
};

已卷动高度

window.scrollY属性表示在垂直方向已滚动的像素值

document.documentElement.scrollTop属性也表示窗口卷动高度

在实际工作中，考虑到浏览器之间的兼容性，在得到已滚动的像素值时，通常会这么写：

var scrollTop = window.scrollY || document.documentElement.scrollTop;  //当浏览器支持window.scrollY时，就取window.scrollY值，如果不支持，则取document.documentElement.scrollTop值

window.scrollY和document.documentElement.scrollTop区别：

window.scrollY是只读的；document.documentElement.scrollTop不是只读的，我们可以设置这个值来改变浏览去的卷动高度

示例代码：

var scrollTop = window.scrollY || document.documentElement.scrollTop;
console.log("窗口已卷动高度：" + scrollTop);

scroll事件

在窗口被卷动之后，就会触发scroll事件，可以使用window.onscroll或者window.addEventListener(‘scroll’)来绑定事件处理函数

示例代码：

//监听窗口卷动高度
window.onscroll = function () {
    console.log("窗口卷动了：" + window.scrollY);
};

scroll事件监听在某些特定场景是非常常用的，比如实现H5页面中的落地页等

🌟 navigator对象

navigator：航行者、领航员、驾驶员

window.navigator属性可以检索navigator对象，它内部含有用户此次活动的浏览器的相关属性标识

属性	意义
appName	浏览器官方名称
appVersion	浏览器版本
userAgent	浏览器的用户代理（含有内核信息和封装壳信息）
platform	用户操作系统

示例代码：

console.log("浏览器品牌：" + navigator.appName);
console.log("浏览器版本：" + navigator.appVersion);
console.log("浏览器用户代理：" + navigator.userAgent);
console.log("浏览器用户操作系统：" + navigator.platform);

🌟 history对象

history：历史

window.history对象提供了操作浏览器会话历史的接口

常用操作就是模拟浏览器回退按钮，尤其在移动端常用

属性	意义
history.back()	等同于点击浏览器的回退按钮
history.go(-1)	等同于history.back()

示例代码：比如从一个列表页点击进入详情页，详情页中有一个“返回列表页”的按钮，点击可直接返回列表页

<!--列表页-->
<body>
    <h1>列表页</h1>
    <div>
        <ul>
            <li><a href="BOM_history_详情页.html">点击查看详情</a></li>
        </ul>
    </div>
</body>

<!--详情页-->
<body>
    <p>详情页</p>
    <button id="back">返回列表页</button>

    <script>
        var back = document.getElementById('back');

        back.onclick = function () {
            history.back();   //或者history.go(-1)
        };
    </script>
</body>

🌟 location对象

location：地址

window.location对象标识了当前所在网址，可以通过给这个属性赋值命令浏览器进行页面跳转

属性/方法	意义
window.location	赋值网址，可命令浏览器跳转到对应网址，window.location.href也可以实现这样的效果
window.reload(true)	重新加载网页

示例代码：页面上新增按钮，分别可以实现跳转到百度、刷新本页面

<body>
    <div>
        <a href="" script="javascript:window.location.reload(true)">刷新页面</a>
        <button id="btn">点我去百度</button>
    </div>

    <script>
        var btn = document.getElementById('btn');

        btn.onclick = function () {
            // window.location = 'https://www.baidu.com';
            window.location.href = 'https://www.baidu.com';
        };
    </script>
</body>