JavaScript BOM核心对象与常用API详解
本文深入解析JavaScript浏览器对象模型（BOM），重点讲解window、location和navigator三大核心对象。通过实例演示系统对话框、窗口打开与关闭、页面跳转及刷新、浏览器信息获取等常见操作，帮助开发者掌握前端基础交互与导航控制技巧。
本文通过具体实例解析JavaScript浏览器对象模型（BOM）的核心原理及其常见应用场景，旨在为读者提供实用的参考指南。
BOM基本概念与window对象
BOM的基本概念
BOM全称为Browser Object Model，即浏览器对象模型。
结合上述结构图可以清晰地看出：
- window对象作为BOM的核心与顶层对象，所有其他对象均基于此延伸，因此也可将其视为window的子对象。
- 需要明确的是，DOM（文档对象模型）实际上是BOM的一个子集。
关于window对象的详细说明
- 在JavaScript中，window对象处于最高层级，是整个脚本执行环境的顶级对象。
- 全局定义的变量以及自定义的函数，本质上都是window对象的属性或方法。
- 在调用window对象下的属性和方法时，可以省略前缀window直接调用。
系统对话框与窗口控制
系统对话框的弹出机制
例如，alert(1)实际上是window.alert(1)的简写形式，这得益于它是window对象的子方法。
系统对话框主要包含三种类型：
alert(); //不同浏览器中的外观是不一样的
confirm(); //兼容不好
prompt(); //不推荐使用
涉及窗口的打开与关闭操作。
具体来看如何打开窗口
window.open(url,target)相关参数解释如下：
- url：指定需要打开的目标地址。
- target：指定新窗口的打开位置，可选值包括_blank（新标签页）、_self（当前窗口）以及_parent（父框架）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--行间的js中的open() window不能省略-->
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
<button>打开百度</button>
<button onclick="window.close()">关闭</button>
<button>关闭</button>
</body>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button')[1];
var closeBtn = document.getElementsByTagName('button')[3];
oBtn.onclick = function(){
//open('https://www.baidu.com')
//打开空白页面
open('about:blank',"_self")
}
closeBtn.onclick = function(){
if(confirm("是否关闭？")){
close();
}
}
</script>
</html>
<body>
<!--BOM使用的是window.开头的语句-->
<!--history模式和 hash模式-->
<!--history模式： xxxx/#/index.html-->
<!--hash模式：xxxx/index.html-->
<button id="btn">跳转</button>
<script>
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
console.log(location);
//打开百度，下面三种方式皆可
// location.href='http://www.baidu.com';
// open('http://www.baidu.com','_self');
window.open('http://www.baidu.com','_self');//在当前页面打开
window.location.reload();//刷新或者叫重载
}
</script>
</body>
location对象与页面跳转
location对象的应用
window.location可以简写为location，它模拟了浏览器的地址栏，能够将完整的URL解析为多个独立的片段。
location对象包含以下关键属性：
- href：用于执行页面跳转。
- hash：返回URL中#符号后的内容，包含#本身。
- host：返回主机名及端口号。
- hostname：仅返回主机名。
- pathname：返回URL中的路径部分。
- protocol：返回通信协议，通常为http或https。
- search：返回查询字符串部分。
示例场景：实现5秒后自动跳转至百度首页。
当访问不存在的网页时，系统常提示5秒后自动跳转至指定页面，此时利用location对象即可实现该功能。
<script>
setTimeout(function () {
location.href = "http://www.baidu.com";
}, 5000);
</script>
location.reload()方法用于重新加载页面，这种方式属于全局刷新，会重新解析整个文档，因此一般不建议频繁使用。
setTimeout(function(){
//3秒之后让网页整个刷新
window.location.reload();
},3000)
navigator对象与客户端信息
navigator对象的功能
通过window.navigator的一些属性，可以获取客户端的相关环境信息。
- userAgent：用于获取操作系统及浏览器版本信息。
- platform：用于获取浏览器支持的操作平台，如win、mac或linux。
console.log(navigator.userAgent);
console.log(navigator.platform);
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述内容能对大家的JavaScript程序设计有所帮助。
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载？前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系：Web前端三件套怎么协作
2026-11-04 15:41:40