JS 浏览器对象模型BOM

【Ceiauq

已于 2022-09-18 16:30:12 修改

阅读量406

点赞数 2

分类专栏： JS 文章标签： javascript 前端 html

于 2022-08-19 21:08:18 首次发布

本文链接：https://blog.csdn.net/chaseqrr/article/details/126429908

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

浏览器对象模型BOM(Brower Object Model)

浏览器对象模型BOM(Brower Object Model)

BOM主要提供一系列与浏览器相关的信息，主要包含以下对象：

window

screen

location

history

navigator

（1） window

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一。

window对象的通用属性和方法：

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
document.body.clientHeight - 浏览器窗口的内部高度(包括滚动条)
document.body.clientWidth- 浏览器窗口的内部宽度(包括滚动条)
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

（2）screen

screen对象的通用属性和方法：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

注意：

screen.availWidth属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

（3）location

location对象的通用属性和方法:

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
location.href 属性返回当前页面的 URL。
location.assign() 方法加载新的文档。
location.search 返回URL的查询字符串，字符串以问号开头

以下是通过location实现页面跳转的三种方式：

//加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。
window.location.assign("https://www.baidu.com")

//直接改变当前页面的url来实现跳转，也可以点击后退返回到上一个页面
window.location.href = "https://www.baidu.com"

// 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的
window.location.replace("https://www.baidu.com")

（4）history

history对象的通用属性和方法:

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
history.go()-也能实现页面的前进和后退

history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
history.go(0);  // go() 里面的参数为0,表示刷新页面