JS BOM了解
概述
BOM(Browser Object Model)浏览器对象模型,就是操作浏览器的一些能力,可以操作的内容如下:
- 获取一些浏览器相关信息(窗口大小)
- 操作浏览器的滚动条
- 浏览器的信息(浏览器的版本)
- 让浏览器出现一个弹窗(alert,confirm,prompt)
BOM的核心就是window对象,window是浏览器的一个对象,里面包含着操作浏览器的方法。
1 History浏览器记录
window 中有一个对象叫做history,是专门用来存储历史记录信息的,在编写时可不使用 window 这个前缀。
1.1 history.go
- history.go(n): n为正数时向前n页,n为负数时向后退n页
window.history.go(-2); // 返回上上页 window.history.go(-1); // 返回上一页 window.history.go(0); // 刷新当前页 window.history.go(1); // 前往下一页
1.2 history.back()
- history.back是用来回退历史记录的,就是回到前一个页面,相当于浏览器上的返回按钮,前提是要有上一条记录,不然就是一直在当前页面,也不会回退。
window.history.back();
1.3 history.forword()
- history.forword是到一个历史记录里面,也就是下一个页面,前提是之前有过回退操作,不然当前就是最后一个页面,没有下一个。
window.history.forward();
2 Location浏览器地址
2.1 操作属性
注意:pathname、search属性在HashRouter路由模式下会失效,只能在BrowserRouter路由模式下使用。
假定当前浏览器加载的URL是:http://test.csdn.com:3000/#/build_table?id=1
常用属性如下表所示:
属性 | 值 | 说明 |
---|---|---|
location.protocol | http: | 页面使用的协议,通常是http或https |
location.hostname | test.csdn.com | 服务器域名 |
location.port | 3000 | 请求的端口号 |
location.host | test.csdn.com:3000 | 服务器名及端口号 |
location.origin | http://text.csdn.com:3000 | url源地址,只读 |
location.href | 完整的URL地址 | 等价于window.location |
location.pathname | /(这里指端口号3000后面的/) | URL中的路径和文件名,不会返回hash和search后面的内容,只有当打开的页面是一个文件时才会生效 |
以下是几个特殊属性:
-
location.hash:URL散列值(#号之后的部分,包括#号);
-
location.search:URL的查询字符串(?号后面的部分,包括?,指的是端口后面紧接着的?号,而不是#号后面的?号)
- url为:http://test.csdn.com:3000/#/build_table?id=1 console.log(location.hash) // "#/build_table?id=1" console.log(location.search ) // "" - url为:http://test.csdn.com:3000/?id=1#/build_table console.log(location.hash) // "#/build_table" console.log(location.search) // "?id=1#/build_table"
-
设置属性,URL为:http://test.csdn.com:3000/#/build_table?id=1
location.hash = '#/cerate_table?id=2' console.log(location.href) // http://test.csdn.com:3000/#/cerate_table?id=2 location.search= '?/id=2' console.log(location.href) // http://test.csdn.com:3000/#/?id=2
-
其他属性示例:http://foouser:[email protected]:80/HB/new_file2.html
属性 值 说明 location.username foouser 域名前指定的用户名 location.password barpassword 域名前指定的密码
2.2 操作方法
- 跳转:location.assign()
// 指定协议跳转 location.assign("http://www.baidu.com") /* 等同于 */ location.href = "http://www.baidu.com" // 以当前页面协议跳转 location.assign("//www.baidu.com") /* 等同于 */ location.href = "//www.baidu.com"
- 刷新:location.reload()
// 重新加载,可能是从缓存加载 location.reload(); // 重新加载,从服务器加载 location.reload(true)
3 window界面属性
- 窗口:指的是浏览器窗口
- 视口:指的是浏览器窗口中的页面视口(不包含浏览器边框和工具栏)
- 屏幕:指的是电脑屏幕
3.1 窗口和屏幕的位置
- screenLeft:表示窗口相对于屏幕左侧的位置,返回值的单位是像素值
- screenTop:表示窗口相对于屏幕顶部的位置,返回值的单位是像素值
console.log("screenLeft 位置:", window.screenLeft); console.log("screenTop 位置:", window.screenTop);
- moveTo:接收要移动到的新位置的绝对坐标x和y;
- moveBy:接收相对当前位置在两个方向上移动的像素值
// 把窗口移动到左上角 window.moveTo(0,0) // 把窗口移动到坐标位置(200,300) window.moveTo(200,300) // 把窗口向下移动100像素 window.moveBy(0,100) // 把窗口向左移动10像素 window.moveBy(-10,0)
3.2 窗口和视口的大小
- 视口:innerHeight和innerWidth,返回浏览器窗口中页面视口大小(不包含浏览器边框和工具栏)
console.log("innerWidth 宽度:",window.innerWidth); // innerWidth 宽度: 1002 console.log("innerHeight 高度:",window.innerHeight); // innerHeight 高度: 907
- 窗口:outerHeight和outerWidth,返回浏览器自身窗口的大小
console.log("outerWidth 宽度:",window.outerWidth); // outerWidth 宽度: 1680 console.log("outerHeight 高度:",window.outerHeight); // outerHeight 高度: 1010
- 浏览器的onscroll事件
浏览器滚动其实其本身没有动,只不过是页面向上平移了,所以滚动应该使用document对象,onscroll事件是当浏览器滚动条滚动时触发或者鼠标滚轮滚动时触发,前提是页面的高度超过浏览器的可视窗口。window.onscroll = function(){ console.log('浏览器滚动了'); }
3.3 视口与滚动的关系
Safari浏览器使用的是window.pageXOffset和window.pageYOffset
- 距离,scrollX:文档向右滚动的距离,当窗口无法展示整个页面,这时候需要滚动查看;
- 距离,scrollY:文档向下滚动的距离,当窗口无法展示整个页面,这时候需要滚动查看;
console.log("scrollX 向右滚动了多少距离:",window.scrollX); // scrollX 向右滚动了多少距离: 0 console.log("scrollY 向下滚动了多少距离:",window.scrollY); // scrollY 向下滚动了多少距离: 0
- 定位,scrollTo(绝对)和scrollBy(相对),这两个方法接收x和y坐标,表示要滚动到的位置
// 滚动到页面左上角 window.scrollTo(0,0) // 滚动到页面左边100像素和顶部200像素的位置 window.scrollTo(100,200) // 相对于当前视口向下滚动100像素 window.scrollBy(0,100) // 相对于当前视口向右滚动40像素 window.scrollBy(40,0)
4 其他不常用属性
4.1 Screen客户端屏幕
属性 | 描述 |
---|---|
screen.height | 获取整个屏幕的高 |
screen.width | 获取整个屏幕的宽 |
screen.availHeight | 整个屏幕的高减去系统部件的高,可用屏幕的高 |
screen.availWidth | 整个屏幕的宽减去系统部件的宽,可用屏幕的宽 |
4.2 Navigator浏览器信息
属性 | 描述 |
---|---|
navigator.userAgent | 获取浏览器的整体信息 |
navigator.appName | 获取浏览器名称 |
navigator.appVersion | 获取浏览器的版本号 |
navigator.platform | 获取当前计算机操作系统 |