什么是BOM?
(Browser Object Model,浏览器对象模型),是js与浏览器窗口交互的接口
BOM常用对象
-
window对象
-
window对象就是当前js脚本运行所处的窗口
<body> <script> var a = '哟,小伙砸来学习哇👍'; // window.hasOwnProperty-检查对象的自有属性 console.log(window.hasOwnProperty('a')); confirm(a); </script> </body>
-
同一个窗口的标签页之间不会共享一个window对象(每个窗口有一个window对象
-
多个js文件之间共享全局作用域(全局变量会成为window对象的属性
- one.html中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script src="/1.js"></script> <script src="/2.js"></script> </html>
- 1.js中
var num = 1;
- 2.js中
num++; confirm('我要吃' + num + '个鸡腿🍗');
-
窗口尺寸相关属性
属性 说明 innerHeight 浏览器窗口的内容区域的高度,包含水平滚动条(若有的话 innerWidth 浏览器窗口的内容区域的宽度,包含垂直滚动条(若有的话 outerHeight 浏览器窗口的外部高度 outerWidth 浏览器窗口的外部宽度 获得不包含滚动条的窗口宽度document.documentElement.clientWidth -
resize事件
- 窗口大小改变后,会触发resize事件
- 绑定事件处理函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> body { height: 3000px; background-image: linear-gradient(to bottom, pink, white); } </style> <body> <script> // 监听窗口尺寸事件 window.onresize = function(){ // 获取当前窗口 var w = document.documentElement; // w.clientWidth,w.clientHeight --> 宽,高 console.log("窗口变大变小buibui!",w.clientWidth,w.clientHeight); }; </script> </body> </html>
- 窗口卷动高度
- 什么是窗口卷动高度?
- 什么是窗口卷动高度?
- 获取窗口卷动高度
<script> // 只读 console.log(window.scrollY); // 可修改窗口卷动高度 console.log(document.documentElement.scrollTop); </script>
进度条下拉,并F5刷新
- 修改窗口卷动高度
document.documentElement.scrollTop = 0
-
scroll事件(在窗口被卷动之后,触发scroll事件
- 绑定事件处理函数
<script> window.onscroll = function(){ // window.scrollY 卷动高度 console.log('窗口卷动啦',window.scrollY); }; </script>
拉动进度条👇
-
-
screen对象(主要用来获取用户的屏幕信息
-
document对象(是window对象的一个属性,可以用来处理页面文档
-
location对象(标识当前所在网址,可以通过给这个属性赋值命令浏览器进行页面跳转
- 实现页面跳转的两种写法
window. Location='网址'; window.location.href='网址';
-
重新加载当前页面
- 调用location的reload方法以重新加载当前页面,参数true表示强制从服务器强制加载
<body> <button id="btn">刷新</button> <script> var btn = document.getElementById('btn'); btn.onclick = function(){ window.location.reload(); }; </script> </body>
-
get请求查询参数
console.log(window.location.search);
-
navigator对象(内部含有用户此次活动的历览器的相关属性和标识
- appName-浏览器官方名称
- appVersion-浏览器版本
- userAgent-浏览器的用户代理(含有内核信息和封装壳信息
- platform-用户操作系统
<script> console.log('浏览器品牌',navigator.appName); console.log('浏览器版本',navigator.appVersion); console.log('操作系统',navigator.platform); console.log('用户代理',navigator.userAgent); </script>
-
history对象(提供了操作浏览器会话历史的接口
-
常用操作-模拟浏览器回退按钮
- one.html中
<body> <a href="/two.html">上two.html康康😼</a> </body>
- two.html中
<body> <h1>什么也没有,略略略🐱</h1> <!-- 返回上一页的三种方法 --> <!-- 方法1和2用这个👇 --> <button id="back">回去吧1&2</button> <!-- 方法3👇 --> <a href="javascript:history.back;">回去吧3</a> <script> var back = document.getElementById('back'); back.onclick = function() { // 方法1 // back上一页,forward下一页 history. Back(); // 方法2 // go()参数:-1返回上一页;1下一页 // history.go(-1); }; </script> </body>
-