-BOM之location、history、navigator常见用法)
点此查看所有教程、项目、源码导航文章目录1. 背景2. location 对象2.1 读取地址信息2.2 页面跳转2.3 刷新页面3. history 对象3.1 后退3.2 前进3.3 跳转到指定历史记录4. navigator 对象4.1 navigator.userAgent最核心4.2 navigator.platform 获取操作系统平台4.3 navigator.appName、navigator.appVersion了解4.4 实战场景判断移动端 / PC 端5. 小结1. 背景上一篇我们认识了 BOM 的顶层对象 window以及基础弹窗。window 下面还有几个非常实用的子对象location、history、navigator。它们都属于 BOM用来获取浏览器窗口、地址栏、访问历史相关信息。简单区分三个对象的职责location负责地址栏读取地址、跳转页面、刷新页面history负责访问历史记录前进、后退navigator负责浏览器本身信息比如浏览器名称、操作系统2. location 对象location 代表当前页面的地址栏信息我们可以读取地址也可以修改地址实现页面跳转。2.1 读取地址信息// 获取完整URL地址console.log(location.href);// 获取域名端口console.log(location.host);// 获取端口号console.log(location.port);// 获取路径部分console.log(location.pathname);最常用的就是location.href它可以拿到浏览器地址栏里完整的网址。2.2 页面跳转给 location.href 赋值就会跳转到新页面。// 跳转到新页面location.hrefhttps://www.baidu.com;2.3 刷新页面// 刷新当前页面location.reload();小提示reload () 就等价于我们按浏览器的刷新按钮。3. history 对象history 保存了当前标签页的访问历史栈用来实现页面前进、后退不能随意读取历史里面的网址浏览器安全限制只能控制跳转。3.1 后退// 回到上一页等价于浏览器左上角后退按钮history.back();3.2 前进// 去下一页等价于浏览器的前进按钮history.forward();3.3 跳转到指定历史记录// 参数 1前进1页参数 -1后退1页参数0刷新当前页history.go(-1);history.go(1);history.go(0);注意必须要有历史记录才能前进后退。刚打开页面没有上一页back () 不会有任何效果。4. navigator 对象navigator 翻译为导航器它里面存放的是当前浏览器、设备、操作系统的相关信息由浏览器自动提供我们主要用来读取信息一般不能修改。4.1 navigator.userAgent最核心userAgent 是一个很长的字符串里面打包了浏览器品牌、版本号、操作系统、设备类型等一大堆信息。console.log(navigator.userAgent);例如我的微软Edge浏览器打印如下打印出来的字符串看起来很杂乱它的作用就是让 JS 知道用户是用什么设备、什么浏览器打开网页的。注意userAgent 是浏览器上报的字符串是可以被修改伪装的所以它的判断只能作为参考不能当成百分百准确的依据。4.2 navigator.platform 获取操作系统平台console.log(navigator.platform);常见返回值Win32Windows 系统MacIntel苹果 Mac 系统Linux x86_64Linux 系统例如我的Windows电脑打印如下4.3 navigator.appName、navigator.appVersion了解早期用来识别浏览器现在现代浏览器返回值统一不太推荐用来判断浏览器属于历史遗留属性。console.log(navigator.appName);console.log(navigator.appVersion);4.4 实战场景判断移动端 / PC 端开发网页的时候经常需要区分手机和电脑展示不一样的内容。原理就是在 userAgent 字符串里面查找有没有Mobile这个关键词。varuanavigator.userAgent;if(ua.indexOf(Mobile)!-1){console.log(当前是手机端访问);}else{console.log(当前是电脑端访问);}解释indexOf如果找到字符串返回下标找不到返回 -1。只要不等于 - 1就说明包含 Mobile代表是移动设备。5. 小结location操作地址栏href 跳转页面reload 刷新页面。history控制页面前进后退back ()、forward ()、go ()出于安全不能读取历史里的网址。navigator读取浏览器、设备、系统信息最常用 userAgent可以简单区分手机和电脑。location、history、navigator 都是 window 下的对象书写时 window 可以省略。
点此查看所有教程、项目、源码导航文章目录1. 背景2. location 对象2.1 读取地址信息2.2 页面跳转2.3 刷新页面3. history 对象3.1 后退3.2 前进3.3 跳转到指定历史记录4. navigator 对象4.1 navigator.userAgent最核心4.2 navigator.platform 获取操作系统平台4.3 navigator.appName、navigator.appVersion了解4.4 实战场景判断移动端 / PC 端5. 小结1. 背景上一篇我们认识了 BOM 的顶层对象 window以及基础弹窗。window 下面还有几个非常实用的子对象location、history、navigator。它们都属于 BOM用来获取浏览器窗口、地址栏、访问历史相关信息。简单区分三个对象的职责location负责地址栏读取地址、跳转页面、刷新页面history负责访问历史记录前进、后退navigator负责浏览器本身信息比如浏览器名称、操作系统2. location 对象location 代表当前页面的地址栏信息我们可以读取地址也可以修改地址实现页面跳转。2.1 读取地址信息// 获取完整URL地址console.log(location.href);// 获取域名端口console.log(location.host);// 获取端口号console.log(location.port);// 获取路径部分console.log(location.pathname);最常用的就是location.href它可以拿到浏览器地址栏里完整的网址。2.2 页面跳转给 location.href 赋值就会跳转到新页面。// 跳转到新页面location.hrefhttps://www.baidu.com;2.3 刷新页面// 刷新当前页面location.reload();小提示reload () 就等价于我们按浏览器的刷新按钮。3. history 对象history 保存了当前标签页的访问历史栈用来实现页面前进、后退不能随意读取历史里面的网址浏览器安全限制只能控制跳转。3.1 后退// 回到上一页等价于浏览器左上角后退按钮history.back();3.2 前进// 去下一页等价于浏览器的前进按钮history.forward();3.3 跳转到指定历史记录// 参数 1前进1页参数 -1后退1页参数0刷新当前页history.go(-1);history.go(1);history.go(0);注意必须要有历史记录才能前进后退。刚打开页面没有上一页back () 不会有任何效果。4. navigator 对象navigator 翻译为导航器它里面存放的是当前浏览器、设备、操作系统的相关信息由浏览器自动提供我们主要用来读取信息一般不能修改。4.1 navigator.userAgent最核心userAgent 是一个很长的字符串里面打包了浏览器品牌、版本号、操作系统、设备类型等一大堆信息。console.log(navigator.userAgent);例如我的微软Edge浏览器打印如下打印出来的字符串看起来很杂乱它的作用就是让 JS 知道用户是用什么设备、什么浏览器打开网页的。注意userAgent 是浏览器上报的字符串是可以被修改伪装的所以它的判断只能作为参考不能当成百分百准确的依据。4.2 navigator.platform 获取操作系统平台console.log(navigator.platform);常见返回值Win32Windows 系统MacIntel苹果 Mac 系统Linux x86_64Linux 系统例如我的Windows电脑打印如下4.3 navigator.appName、navigator.appVersion了解早期用来识别浏览器现在现代浏览器返回值统一不太推荐用来判断浏览器属于历史遗留属性。console.log(navigator.appName);console.log(navigator.appVersion);4.4 实战场景判断移动端 / PC 端开发网页的时候经常需要区分手机和电脑展示不一样的内容。原理就是在 userAgent 字符串里面查找有没有Mobile这个关键词。varuanavigator.userAgent;if(ua.indexOf(Mobile)!-1){console.log(当前是手机端访问);}else{console.log(当前是电脑端访问);}解释indexOf如果找到字符串返回下标找不到返回 -1。只要不等于 - 1就说明包含 Mobile代表是移动设备。5. 小结location操作地址栏href 跳转页面reload 刷新页面。history控制页面前进后退back ()、forward ()、go ()出于安全不能读取历史里的网址。navigator读取浏览器、设备、系统信息最常用 userAgent可以简单区分手机和电脑。location、history、navigator 都是 window 下的对象书写时 window 可以省略。
