目录
一、概述
- BOM:浏览器对象模型,提供了方法和属性,让开发者可以通过js对浏览器进行操作
- 包含:window对象、navigator对象、location对象、history对象、screen对象
二、window对象
- window对象:代表整个浏览器的窗口,也是网页的全局对象,可以省略
window.
这个前缀 - window对象属性
属性 描述 document 对 Document 对象的只读引用 innerHeight 窗口的文档显示区的高度,innerWidth宽度 localStorage 在浏览器中存储 key/value 对。没有过期时间 sessionStorage 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据 - window对象方法
方法 描述 alert() 警告框 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框 prompt() 显示可提示用户输入的对话框 setInterval() 定时器:按照指定的周期(以毫秒计)重复调用函数或计算表达式 clearInterval() 取消由 setInterval() 设置的 timeout setTimeout() 延时器:在指定的毫秒数后调用函数或计算表达式,参数同定时器 clearTimeout() 取消由 setTimeout() 方法设置的 timeout scrollBy() 相对滚动,按照指定的像素值来滚动内容 scrollTo() 绝对滚动,把内容滚动到指定的坐标 getComputedStyle() 获取指定元素的 CSS 样式 print() 调出打印对话框 - 页面自动向下滚动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script> window.onload = function() { let btn = document.querySelector("button"); btn.addEventListener("click", scrollWindow); // 定义个全局定时器序号变量,结合类 let timer; function scrollWindow() { // 打开一个定时器之前,先关闭之前打开的定时器, // 防止一个元素节点叠加多个定时器,非法值不会报错 clearInterval(timer); // 存储循环次数 let i = 0; // 定数器参数一:回调函数(此处为匿名函数) timer = setInterval(() => { // 滚动像素数,第一个参数x,第二个y window.scrollBy(0, 10); // 回调函数循环4次关闭 if (i > 4) { // 关闭定时器,否则会一直持续到关闭页面 clearInterval(timer); // 动画:此处可以再加含定时器的函数,可由外部传入,例如改变元素节点样式 } // 每次调用此函数,i加一 i++; // 定时器参数二:循环间隔为1000毫秒 }, 1000); } } </script> </head> <body> <!-- 按钮开启定时器 --> <button onclick="scrollWindow()">启动滚动</button> <p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> <!-- 写足够多个,知道把页面右边的滚动条写出来 --> <p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>
定时器: 可以对同一个元素设置多个,丢失了定时器的timer则丢失了关闭定时器的句柄,只能关闭页面来关闭定时器
三、navigator对象
- 功能:用来区分浏览器(chrome、Firefox、IE),基本被废弃了
- 区分浏览器
window.onload = function() { let ua = navigator.userAgent; if (/firefox/i.test(ua)) { alert("火狐浏览器"); } else if (/chrome/i.test(ua)) { alert("chrome浏览器"); } else if (/msie/i.test(ua)) { alert("IE浏览器"); } else if ("ActiveXObject" in window) { alert("IE11浏览器"); } }
四、location对象
- 功能:当前浏览器地址栏信息
- 地址操作
// 在当前页面内触发页面跳转,生成历史记录 location.assign("http://baidu.com"); // 功能同上,不生成历史记录 location.replace("http://baidu.com"); // 在当前页面内触发页面跳转,相对路径,生成历史记录 location.assign("bubble.html"); // 功能同上,不生成历史记录 location.replace("bubble.html"); // 刷新页面(使用缓存),默认参数为false,可不填 // 若参数为true,浏览器重新向服务器请求页面,ctrl+F5 location.reload();
五、history对象
- 功能:代表浏览器历史记录,控制历史记录跳转
- 操作浏览记录
// 相当于浏览器的后退按钮,等同于history.go(-1); history.back(); // 相当于浏览器的前进按钮,等同于history.go(1); history.forward(); // 本次打开浏览器的历史记录数量 let num = history.length; // 前进一个 history.go(1); // 后退一个 history.go(-1);
六、screen对象
- 功能:用户显示器相关信息,移动端用的多