一、认识BOM
BOM(Browser Object Model，浏览器对象模型)：是js和浏览器窗口交互的接口。
应用场景：一些与浏览器改变尺寸，滚动条相关的特效，都要借助BOM技术。
二、介绍window对象
window对象是当前js脚本运行所处的窗口，而这个窗口中包含DOM结构，window.document属性就是document对象。
标签页与window关系：在有标签页功能的浏览器中，每个标签都拥有自己的window对象，标签与标签之间的window互不干扰！
2.1、全局变量是window的属性(以及一些内置函数)
全局变量会成为window对象的属性，这也就意味着多个应用于同一页面中的js文件是共享全局作用域的，即js文件没有作用域隔离功能！
<script> var a = 100; //全局变量属于window的变量 console.log(window.a == a); //window内置函数 console.log(window.alert == alert); console.log(window.hasOwnProperty('setInterval'));//测试是否包含属性(或对象) //window.alert() 与之前写的 alert()实际上效果一致，这些函数默认都是window对象 window.alert("123"); </script>
示例
测试一个小案例：看看在一个页面中的多个js文件里作用域同一个window
1.js
var a = 111;
2.js
a++; console.log(a);
准备两个js文件之后引入到一个HTML中来测试：
<body> <script src="./1.js"></script> <script src="./2.js"></script> </body>
2.2、窗口尺寸相关属性
属性 |
意义 |
innerHeight |
浏览器窗口的内容区域高度，包含水平滚动条(若是有) |
innerWidth |
浏览器窗口的内容区域宽度，包含垂直滚动条(若是有) |
outerHeight |
浏览器窗口的外部高度(含浏览器) |
outerWidth |
浏览器窗口外部宽度 |
若是想要获得不包含滚动条的窗口宽度，使用：document.documentElement.clientWidth
测试：
<style> body { /* 让浏览器有宽度 */ height: 1000px; } </style> <body> <script> console.log(window.innerWidth);//浏览器内部宽度+水平滚动条 console.log(window.outerWidth);//浏览器内部宽度+水平滚动条+浏览器外部线条宽度 console.log(window.document.documentElement.clientWidth);//浏览器内部宽度 </script> </body> ———————————————— 版权声明：本文为CSDN博主「长路 ㅤ 」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/cl939974883/article/details/124622832
2.3、窗口改变大小事件(onresize)
在窗口大小改变之后，就会触发resize事件。(window.onresize或window.addEventListener('resize'))
示例：
<script> //绑定onresize事件 window.onresize = function () { console.log(window.document.documentElement.clientWidth); } </script>
2.4、卷动高度与卷动事件(onscroll)
卷动高度
通常若是页面有一定的高度时，可通过使用window.scrollY或document.documentElement.scrollTop来获取到。
注意：其中window.scrollY是只读的，而document.documentElement.scrollTop是可读可写的表示可以修改！
应用场景：可通过使用该属性来检测浏览器此时处于的位置，或者说来进行定位浏览器的卷动位置，实现自定义！
卷动事件
语法：window.scroll。
示例：
<style> body { height: 1000px; } </style> <body> <script> window.onscroll = function () { console.log(window.scrollY); }; </script> </body>
三、document相关事件
3.1、切换屏幕(onvisibilitychange)
<script> //切换屏幕事件 document.onvisibilitychange = function () { alert("不允许切换屏幕，警告一次！"); document.onvisibilitychange = null; }; </script>
四、navigator对象
window.navigator：该对象包含了用户此次活动的浏览器相关属性和标识。
属性 |
意义 |
appName |
浏览器官方名称 |
appVersion |
浏览器版本 |
userAgent |
浏览器的用户代理(含有内核信息和封装壳信息) |
platform |
用户操作系统 |
测试：
<script> console.log(window.navigator.appName); console.log(window.navigator.appVersion); console.log(window.navigator.userAgent); console.log(window.navigator.platform); </script>
五、history对象
window.history：该对象提供了操作浏览器会话历史的接口。常用操作就是模拟浏览器回退按钮。
常用方法：介绍两个模拟浏览器回退方法
history.back()。
history.go(-1)。
测试：
第一个页面：usuallyexer.html
<a href="./u2.html">跳转u2网页</a>
第二个页面：u2.html，提供了两种方式来进行回退
<body> <h1>我是u2网页</h1> <!-- 方式一：按钮绑定点击事件 --> <button>点我回退网页</button> <!-- 方式二：通过链接中编写js脚本进行回退 --> <a href="javascript:history.go(-1);">点我回退</a> <script> var m_button = document.getElementsByTagName("button")[0]; // 绑定单击事件 m_button.onclick = function () { //window.history.back();//等同于history.go(-1); window.history.go(-1); } </script> </body>
