BOM
BOM
BOM概念
BOM(browser Object model),译为浏览器对象模型。JavaScript会把浏览器的一个标签页(即网页)作为一个对象存于程序中,提供了一系列API来操作标签页,比如新建或关闭标签页、跳转页面、前进或后退等功能。
类似于DOM核心是document
对象,BOM也是有一个核心对象window
。BOM相关的API是由window
对象提供。
window对象概念
widow对象是每一个页面都会有的对象,由JavaScript程序自动生成,每个页面的window对象是不一样的。window对象提供了用于操作本页面所需的所有API。值得一提的是,document对象实际上是作为window对象的一部分的。
window对象API
-
alert
-
prompt
-
confirm
:页面上弹出一个确认框,点击确定返回true,否则返回false。 -
open
:新建一个页面。不推荐使用,受浏览器的安全机制影响,可能无法执行。 -
close
:关闭当前页面。 -
setInterval
-
setTimeout
-
clearInterval
-
clearTimeout
-
innerWidth&innerHeight
:用于获取页面窗口的宽度和首屏高度。 -
outerWidth&outerHeight
:用于获取页面窗口的宽度和整个标签页窗口的高度(即innerHeight+浏览器的工具栏高度)。//close var result = confirm('确定是否关闭页面'); window.close();//关闭当前页面 //open window.open("网页地址", 打开方式, "窗口的基本配置字符串"); //例子:新页面打开百度首页,宽高300,距离浏览器顶部和左边100px window.open("http://www.baidu.com", '_blank', "width=300, height=300, top=100, left=100"); // innerWidth innerHeith console.log(innerWidth ,innerHeight);
BOM四大内置对象
location
属于window对象,location本身也是一个对象,内置了一些API能够实现刷新、跳转页面等功能,同时能够获取页面地址。
常用API:
-
location.host
:获取页面地址中的主机地址 -
location.port
:获取页面地址中的端口号 -
location.protocol
:获取页面地址中的协议名称 -
location.hostname
:获取页面地址中的ip地址 -
location.search
:获取页面地址中的 数据 -
location.href
:获取页面的完整地址 -
location.assign()
:跳转到指定的页面,新建一条历史记录 -
location.replace()
:跳转到指定的页面,替换当前历史记录,无法后退到上一步 -
location.reload()
:刷新当前页面//例子:http://127.0.0.1:5500/week4/day02/05-location.html?name=zs&age=12&sex=man console.log(location.host);//127.0.0.1:5500 console.log(location.port);//5500 console.log(location.protocol);//http: console.log(location.hostname);//127.0.0.1 console.log(location.search);//?name=zs&age=12&sex=man console.log(location.href);//整个地址 //跳转 location.assign("要跳转的页面地址") location.replace("要跳转的页面地址") location.href = "要跳转的页面地址"; //刷新 location.reload();
- 基本上只能够使用,除了
href
外不能修改。
- 基本上只能够使用,除了
history
提供了页面前进或后退的api,能够实现页面的前进或后退。
-
go(数字)
:根据数字的正负来确定是前进还是后退指定的页数。go(-1)
表示后退一页,go(1)
表示前进一步。 -
forward()
:前进一页。 -
back()
:后退一页。window.history.go(-1); 等同于 history.go(-1); history.forward(); history.back();
navigator
收集与浏览器本身相关的信息,比如浏览器版本,当前操作系统的版本等。配合正则表达式,能够判断当前用户使用的浏览器版本以及是否为移动端,方便切换PC端页面或移动端页面。
-
userAgent
:返回浏览器的版本信息navigator.userAgent
screen
收集屏幕的相关信息,比如是否横屏、色彩之类的。HTML5针对screen新增了orientation
来获取屏幕的角度信息,竖屏模式角度返回0,横屏返回90。
console.log(screen);
//显示当前屏幕旋转的角度
console.log(screen.orientation.angle);// 竖屏:0 横屏:90
定时器
JavaScript提供了两个API来实现在一段时间之后执行指定的JavaScript代码的功能,根据指定js代码是否重复执行分为两种定时器:延时定时器以及间隔定时器。
延时定时器
-
setTimeout
:指定一段时间之后执行一次指定的 JavaScript代码。setTimeout(function(){ 延时执行的js代码 },延时时间);
延时时间以毫秒为单位
-
clearTimeout
:终止定时器的执行clearTimeout(延时定时器的标识符);
定时器的标识符指的是定时器的id,表示要暂停哪个定时器,定时器的标识符可以通过
setTimeout
的返回值来得到。clearTimeout
是定时器执行之前使用,如果定时器执行后clearTimeout是无效的。
间隔定时器
-
setInterval
:能够实现每隔一段时间都会执行一次指定的代码。setInterval(function(){ 每隔一段时间要执行的js代码 },间隔时间);
间隔时间以毫秒为单位
-
clearInterval
:用于停止间隔定时器clearInterval(间隔定时器的标识符);
-
如果不清除定时器就新增同样的定时器,则这些定时器就会叠加,反应为执行代码频次增加(像分时复用一样),所以在新增定时器时记得清除旧定时器。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库