JavaScript BOM核心对象详解：location、navigator与history
本文深入解析JavaScript中三大BOM核心对象。重点讲解location对象的URL解析、页面跳转及刷新方法；介绍利用navigator.userAgent判断设备类型；演示history对象实现前进后退功能。通过具体代码示例，帮助开发者掌握浏览器对象模型的关键操作。
window 对象暴露了一个名为 location 的属性，该属性用于获取或设置当前窗体的 URL，并具备解析 URL 的功能。由于该属性返回的是一个对象，因此通常被称为 location 对象。
下面将对该对象的具体用法进行详细解析。
一、location对象
1、URL
统一资源定位符（Uniform Resource Locator, URL）是互联网上标准资源的地址标识。互联网上的每个文件都拥有唯一的 URL，它既指明了文件的具体位置，也规定了浏览器应如何处理该资源。
URL 遵循以下一般语法格式：
protocol://host[:port]/path/[?query]#fragment http://www.itcast.cn/index.html?name=andy&age=18#link
| 组成 | 说明 |
|---|---|
| protocol | 通信协议，常用的http,ftp,maito等 |
| host | 主机（域名） |
| port | 端口号可选，省略时使用方案的默认端口，如http的默认端口为80 |
| path | 路径，由零个或多个‘/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址 |
| query | 参数 以键值对的形式，通过&符号分隔开来 |
| fragment | 片段 #后面内容 常见于链接，锚点 |
2、location 对象的属性
通过 location 对象的属性，我们可以获取地址栏中对应的详细信息。例如：
以 CSDN 首页为例，打开开发者工具并进入控制台，输入 location 即可查看该对象包含的多个属性及其返回值：
或者，直接在控制台输入特定属性名，即可获取对应的返回值。
以下示例演示如何制作一个点击按钮后自动跳转页面的效果：
<body>
<button>跳转</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
var timer = 5;
btn.addEventListener('click',function(){
time()
})
var time = setInterval(function(){
if(timer == 0) {
this.location.href = 'https://www.baidu.com'
}
else{
div.innerHTML = '页面将在'+timer+'秒后跳转'
timer--;
}
},1000);
</script>
</body>
运行上述代码后的效果为：
3、location 对象的方法
| location对象方法 | 返回值 |
|---|---|
| location.assign() | 跟href一样，可以跳转页面（也称为重定向页面） |
| location.replace() | 替换当前页面，因为不记录历史，所以不能后退页面 |
| location.reload() | 重新加载页面，相当于刷新按钮或者f5 如果参数为true 强制刷新 ctrl+f5 |
此外，我们还可以利用 location 对象的方法来实现页面跳转：
<button>点击跳转</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
location.assign('https://www.baidu.com')
})
</script>
location.assign() 这种方式实现的跳转允许用户后退页面；而 location.replace() 方法由于不记录浏览历史，因此无法执行后退操作。
二、navigator对象
navigator 对象包含了关于浏览器的详细信息，它拥有众多属性。其中最为常用的是 userAgent，该属性用于返回由客户端发送给服务器的 user-agent 头部值。
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机
} else {
window.location.href = ""; //电脑
}
三、history对象
| history对象方法 | 作用 |
|---|---|
| back（） | 可以后退功能 |
| forward() | 前进功能 |
| go(参数) | 前进后退功能 参数如果是1，前进一个页面 如果是-1 后退一个页面 |
假设我们有两个页面，希望通过按钮实现前进和后退功能，可以分别为两个页面的按钮绑定 forward 方法和 history 方法，具体代码如下：
index.html
<body>
<a href="list.html">去到列表页面</a>
<button>前进</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
history.forward()
})
</script>
</body>
list.html
<body>
<a href="index.html">返回主页面</a>
<button>后退</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
history.back()
})
</script>
</body>
实现的效果如下：
或者，我们也可以使用history.go(1)来实现前进功能；使用history.go(1)来实现后退功能。
总结
本文到此结束，希望能为读者提供帮助，同时也欢迎大家关注本站以获取更多相关内容！
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成：分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南：Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19
自定义JS颜色选择器UI样式与交互细节
2026-11-05 09:09:06