目录
一、概述
- 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对象
- 功能：用户显示器相关信息，移动端用的多