BOM的五个对象

最新推荐文章于 2023-07-11 15:02:05 发布

Try Tomato

最新推荐文章于 2023-07-11 15:02:05 发布

阅读量2.8k

点赞数 2

分类专栏： # + 浏览器 BOM 文章标签： BOM windows javascript 前端 BOM五大对象

本文链接：https://blog.csdn.net/weixin_63836026/article/details/124218585

版权

+ 浏览器 BOM 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

BOM有常用五大对象，分别为：

window对象

screen对象

location对象

navigator对象

history对象

window对象我们在之前详细阐述过，这里不做多余赘述：

BOM顶级对象window的常见事件_Developer小蜗的博客-CSDN博客

一.location对象

location对象是window对象提供的，专门用于获取设置窗口URL，并且可以解析URL

它的返回值是一个对象

1.location对象属性

location.href：获取设置整个URL

location.host：返回域名

location.port：返回端口号（没有写的话不会返回80端口，返回空字符串）

location.pathname：返回路径

location.search：返回参数（？后面的字符串【也就是用户提交信息】）

location.hash：返回片段（#后的内容【例如链接、锚点等】）

2.location方法

location.assign():与href一样，可以跳转页面（也叫重定向）

location.replace()：替换当前页，不记录历史（也就是说不能回退页面）

location.reload(true)：重新加载页面（相当于F5刷新键）

详细文档查询：

window.location - Web API 接口参考 | MDN

二.screen对象

screen.availHeight

sereen.availWidth 获取屏幕中不包含任务栏的宽高

screen.height

sceen.width 全屏幕的宽高

相关文档：Window.screen - Web API 接口参考 | MDN

三.navigator对象

navigator对象包含着浏览器有关的信息，他有很多的属性，最常使用的就是userAgent，返回客户端发送给服务器的user-agent头部的值,也就是返回当前浏览器的用户代理

什么是浏览器用户代理，其实就是我们打开该网页时使用的终端名称

我们可以使用这个属性搭配location的href属性来实现判断用户在哪个终端打开的页面，并实现跳转：

if((navigator.userAgent.match(/(phone | pad |pod | iPhone | iPod | ios | iPad | Android | Mobile | BlackBerry | IEMobile | MQQBrowser | JUC | Fennec | wosBrower | BrowserNG | WebOS | Symbian | Windows Phone)/i))){
    window.location.href = ''    //手机
}else{
    window.location.href = ''    //电脑
}

navigator对象详细查询：

window.navigator - Web API 接口参考 | MDN