1跳转页面属性名history.back()谐音读音黑斯特瑞 拜克使用方法history.back()讲解属性作用返回上一页等同于浏览器左上角回退按钮使用场景详情页的返回按钮弹窗关闭后返回上一页多步骤表单上一步按钮使用图属性名history.forward()谐音读音黑斯特瑞 佛沃得使用方法history.forward()讲解属性作用在浏览器历史记录里向前前进一页模拟浏览器自带的前进按钮使用场景后台管理系统自定义导航条多步骤表单上一步、下一步使用图属性名history.go()谐音读音黑斯特瑞 勾使用方法history.go(1或者-1)讲解属性作用根据传入的数字参数在浏览器历史记录中跳转 n 步使用场景前进多步回退多步history.go (0) 刷新页面使用图2screen /window 尺寸相关 API1:screen.availWidth / availHeight属性名screen.availWidth谐音读音斯哥rin,额维欧 维兹属性名screen.availHeight谐音读音斯哥rin,额维欧 海特使用方法let width1 screen.availWidth;讲解属性作用:获取显示器屏幕除去任务栏之后的可用宽高是硬件屏幕的尺寸不是浏览器窗口使用场景弹窗居中计算以整个显示器屏幕为基准居中判断用户显示器分辨率做大屏适配使用图2:window.innerWidth / window.innerHeight属性名window.innerWidth谐音读音温豆,因呢 维兹属性名window.innerHeight谐音读音温豆,因呢 海特使用方法:let windo window.innerWidth讲解属性作用:获取浏览器可视窗口视口的宽高包含滚动条不包含浏览器标题栏工具栏。窗口拖拽缩放数值会跟着变。使用场景:响应式 JS 判断窗口小于768px切换移动端逻辑监听resize窗口大小改变事件窗口变化重新计算布局使用图:3:offsetWidth /offsetHeight属性名offsetWidth 谐音读音奥夫赛特 维兹属性名offsetHeight谐音读音奥夫赛特 海特使用方法:let width2 pop.offsetWidth;讲解属性作用:获取元素实际渲染的宽高 width padding border不包含 margin。使用场景:下拉菜单定位拿到父盒子实际宽高让下拉框和父盒子宽度对齐JS 获取盒子真实大小做动态布局使用图:API 读值来源 包含内容 典型场景screen.availWidth 显示器屏幕 屏幕除去任务栏 基于显示器弹窗居中、判断屏幕分辨率window.innerWidth 浏览器视口 可视区 滚动条 JS 响应式、resize 监听、窗口居中dom.offsetWidth DOM 元素 widthpaddingborder 获取盒子渲染大小下拉浮层定位3: window 窗口操作属性名window.open()谐音读音温豆 欧喷使用方法: let 变量名 window.open()讲解属性作用:JS 打开新浏览器窗口 / 新标签页可以控制弹出窗口的宽高、位置。返回新窗口的 window 对象newwin可以操作新窗口。使用场景:打印预览、弹出独立预览窗口后台系统弹出子业务窗口使用图:属性名window.close()谐音读音温豆 克楼兹使用方法// 关闭当前页面window.close()// 关闭js打开的新窗口let newwin window.open(‘./xxx.html’)newwin.close()讲解属性作用关闭浏览器窗口。 限制JS 只能关闭由 window.open () 脚本打开的窗口直接地址栏打开的页面js 不能关闭浏览器安全限制。使用场景子弹窗页面放关闭按钮预览弹窗看完自动关闭坑普通标签页直接调用window.close()浏览器会阻止安全策略。使用图属性名moveTo谐音读音木夫 吐属性名resizeTo谐音读音瑞赛兹 吐使用方法open返回的值.moveTo(200,100)调整位置使用方法open返回的值.resizeTo(800,600)控制页面大小讲解属性作用moveTo(x, y)移动浏览器窗口窗口左上角定位到屏幕坐标 x,yresizeTo(w, h)修改浏览器窗口的宽高使用场景后台系统弹出业务小窗口自动定位 设置尺寸弹出预览窗口统一窗口规格多窗口工具多个弹窗错开摆放使用图4:location 对象地址栏 BOM1属性名location.hostname谐音读音喽凯深 厚斯特内姆使用方法console.log(location.hostname)讲解属性作用获取域名主机名不带端口。使用场景后台管理系统区分多域名部署判断当前访问的是哪个站点域名做域名白名单校验判断用户是不是在指定域名下访问页面埋点统计上报用户当前访问的网站域名使用图2属性名location.pathname谐音读音喽凯深 帕斯内姆使用方法console.log(location.pathname)讲解属性作用获取部分url 路径域名后面的路径。使用场景侧边栏菜单高亮根据浏览器路径匹配菜单自动激活当前选中菜单页面路由判断原生 JS 不使用框架时根据路径加载不同页面模块使用图3属性名 location.port谐音读音喽凯深 波特使用方法console.log(location.port);讲解属性作用获取端口号。使用场景本地开发环境区分本地开发经常用 8080、3000 端口线上环境端口为空用来区分本地 / 线上环境拼接完整跳转地址手动组装 url 的时候需要拿到端口一起拼接使用图4属性名 location.protocol谐音读音喽凯深 普柔透扣使用方法console.log(location.protocol);讲解属性作用获取协议 http: 、https:带冒号。使用场景根据不同域名做不同业务逻辑拼接完整请求地址使用图5属性名location.href““谐音读音喽凯深 艾奇瑞夫使用方法location.href””讲解属性作用读拿到完整的 url 地址写赋值页面跳转会新增历史记录可以 back 回退使用场景页面跳转项目最常用,获取浏览器完整地址复制链接功能使用图6属性名location.assign()谐音读音喽凯深 呃赛恩使用方法location.assign(页面路径)讲解属性作用页面跳转新增一条历史记录可以history.back()返回上一页。使用场景登录页点击登录跳转到首页用户可以点返回退回到登录页。使用图7属性名location.replace()谐音读音喽凯深 瑞普雷斯使用方法location.replace(页面路径)讲解属性作用页面跳转替换当前历史记录不会新增历史。 跳转之后不能 back 回到上一页。使用场景登录成功跳转首页404 页面重定向表单提交成功跳转禁止退回到提交页使用图两个都可以跳转页面他们的区别是什么replace 当前页跳转无法通过back返回也无法通过浏览器返回键返回assign 当前页跳转可以通过back返回也可以通过浏览器返回键返回5BOM 对话框属性名alert()谐音读音呃勒特使用方法alert(’文字‘)讲解属性作用弹出提示框只有一个【确定】按钮。没有返回值阻塞代码点确定之后代码才继续往下执行。使用场景简单错误提示调试测试用学习阶段练习提示用户信息使用图属性名confirm()谐音读音肯佛姆使用方法let res confirm(‘确定要删除吗’)讲解属性作用弹出弹窗有【确定】、【取消】两个按钮。点击确定返回 true点击取消返回 false使用场景删除操作前二次确认用户确认之后才执行删除逻辑。使用图属性名prompt()谐音读音普朗普特使用方法let inputVal prompt(‘请输入名字’,‘默认值’)讲解属性作用弹窗带输入框有确定、取消按钮。用户输入内容点确定返回输入的字符串用户点取消返回 null使用场景练习、demo 小案例获取用户简单输入实际业务几乎不用样式不能自定义页面一般自己写 input 表单。使用图