副队长JavaScript教程(61)-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 可以省略。

副队长JavaScript教程(61)-BOM之location、history、navigator常见用法

相关推荐

数据图表也有设计门槛：6款主流产品谁能做出更专业的商业图表？

AWESOME-OCR-LLM完整指南：一文读懂大模型时代OCR的900+篇论文全景

MediaPipe手势识别Android集成实战：从关键点到源码避坑

更多资讯

protobuf v3.5.1 C++库实战：老项目序列化编译、链接与避坑指南

博途V20安全设置详解：访问级别、用户角色与权限校验避坑指南

Qt无线连接与软键盘实现：WiFi扫描、连接及输入方案详解

SSA-RELM优化模型：麻雀算法提升分类预测性能

2025届毕业生必备AI学术工具评测与组合方案

微软Autopilot与腾讯WorkBuddy对比：设备管理 vs 办公效率智能体

今日更新

AI智能体开发实战：从技术原理到商业落地

OpenShell 完全定制指南：从安装到深度配置，打造高效 Windows 开始菜单

Superpowers技能体系全解析：从Skills引入到安装的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？