javascript BOM基础
BOM 也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。
BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准。所以,BOM 本身是没有标准的或者还没有哪个组织去标准它。
1、 window 对象
BOM 的核心对象是 window,它表示浏览器的一个实例。window 对象处于 JavaScript结构的最顶层,对于每个打开的窗口,系统都会自动为其定义 window 对象。
window 对象有一系列的属性,这些属性本身也是对象。本节不介绍呢么详细,只是介绍一下常用的属性
2、location 对象
location 是 BOM 对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location 对象是 window 对象的属性,也是 document 对象的属性;所以 window.location 和 document.location 等效。
alert(location); //获取当前的 URL
属性 | 描述的URL 内容 |
---|---|
hash | 如果该部分存在,表示锚点部分 |
host | 主机名:端口号 |
hostname | 主机名 |
href | 整个 URL |
pathname | 路径名 |
port | 端口号 |
protocol | 协议部分 |
search | 查询字符串 |
方法 | 功能 |
---|---|
assign() | 跳转到指定页面,与 href 等效 |
reload() | 重载当前 URL |
repalce() | 用新的 URL 替换当前页面 |
location.hash='#1'; //设置#后的字符串,并跳转
alert(location.hash); //获取#后的字符串
location.port=8888; //设置端口号,并跳转
alert(location.port); //获取当前端口号,
location.hostname='Lee'; //设置主机名,并跳转
alert(location.hostname); //获取当前主机名,
location.pathname='Lee'; //设置当前路径,并跳转,http://127.0.0.1:8848/Lee#1
alert(location.pathname); //获取当前路径,
location.protocal='ftp:'; //设置协议,没有跳转
alert(location.protocol); //获取当前协议
location.search='?id=5'; //设置?后的字符串,并跳转
alert(location.search); //获取?后的字符串
location.href='http://www.baidu.com'; //设置跳转的 URL,并跳转
alert(location.href); //获取当前的 URL
3、 history 对象
history 对象是 window 对象的属性,它保存着用户上网的记录,从窗口被打开的那一刻算起。
属性 | 描述 URL 中的哪部分 |
---|---|
length | history 对象中的记录数 |
方法 | 功能 |
---|---|
back() | 前往浏览器历史条目前一个 URL,类似后退 |
forward() | 前往浏览器历史条目下一个 URL,类似前进 |
go(num) | 浏览器在 history 对象中向前或向后 |
4、 navigator 对象
Navigator 对象包含有关浏览器的信息。没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。navigator 对象最早由 NetscapeNavigator2.0 引入的 navigator 对象,现在已经成为识别客户端浏览器的事实标准。用于浏览器检测。与之前的 BOM 对象一样,每个浏览器中的 navigator 对象也都有一套自己的属性。
属性或方法 | 说明 | IE | Firefox | Safari /Chrome | Opera |
---|---|---|---|---|---|
appCodeName | 浏览器的名称。通常是Mozilla,即使在非 Mozilla浏览器中也是如此 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
appName | 完整的浏览器名称 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
appMinorVersion | 次版本信息 | 4.0+ | - | - | 9.5+ |
appVersion | 浏览器的版本。一般不与实际的浏览器版本对应 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
buildID | 浏览器编译版本 | - | 2.0+ | - | - |
cookieEnabled | 表示 cookie 是否启用 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
cpuClass | 客户端计算机中使用的 CPU 类 型(x86、68K、Alpha、PPC、other)4.0+ - - -javaEnabled() 表示当前浏览器中是否启用了Java | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
language | 浏览器的主语言 | - | 1.0+ | 1.0+ | 7.0+ |
等等不做介绍
不同的浏览器支持的功能、属性和方法各有不同。比如 IE 和 Firefox 显示的页面可能就会有所略微不同。常用例子:
alert('浏览器名称:'+navigator.appName);
alert('浏览器版本:'+navigator.appVersion);
alert('浏览器用户代理字符串:'+navigator.userAgent);
alert('浏览器所在的系统:'+navigator.platform);
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了