BOM
作者: dkvirus 发表于: 2017-07-01 16:36:00 最近更新: 2018-08-01 22:08:04

BOM(Browser Object Model)浏览器对象模型,用来处理有关浏览器的一些东东,比如:获取浏览器的宽高、设置浏览器滚动条位置、设置浏览器访问历史记录(前进一页/后退一页)、设置浏览器地址栏地址等一切和浏览器有关的操作。

一、window 的属性

1. 浏览器组成对象

1.1 window.location

location 代表浏览器地址栏,包含 URL 网址相关信息。

有个地址:https://blog.dkvirus.top/js/article?name=dkvirus#3_1

属性 说明 结果
location.protocol 获取网址的协议 https:
location.host 获取网址主机名和端口号(这里端口为 443 默认不显示) blog.dkvirus.top
location.hostname 获取网址主机名 blog.dkvirus.top
location.port 获取网址端口号 ‘’ 网址中没有显示端口号,空字符串
location.pathname 获取网址路径名 /js/article
location.search 获取网址查询参数,问号后面的键值对 ?name=dkvirus
location.hash 获取网址锚链接,井号后面的东东 #3_1
location.href 获取浏览器地址栏里的完整网址 https://blog.dkvirus.top/js/article?name=dkvirus#3_1

1.2 window.document

当浏览器中加载 html 文档时,html 文档就是 document 对象。

document 比较特殊,在 DOM 里面详细介绍。

1.3 window.history

history 对象控制浏览器访问记录。

window.history.back() 跳转到上一个访问的页面;

window.history.forward() 跳转到下一个访问的页面;

window.history.go(2) 跳转到访问记录的第二个页面;

1.4 window.navigator

navigator 包含有关浏览器的信息,如浏览器名称、版本等信息。下面以谷歌浏览器测试数据进行总结:

属性 说明 结果
navigator.appCodeName 浏览器代码名 “Mozilla”
navigator.appName 浏览器名称 “Netscape”
navigator.appVersion 浏览器平台和版本信息 “5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36”
navigator.cookieEnabled 浏览器是否启用 cookie 启用 cookie 返回 true
navigator.platform 运行浏览器的操作系统平台 “Win32”(系统明明是 window 64 位的,检测有的迷)
navigator.userAgent 客户端往服务器发送 user-agent 的值 “Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36”

1.5 window.screen

availHeight 和 height 属性测试了下也不知道到底指的啥??

1.6 window.console

1)日志级别

控制台打印日志有四个级别:log、info、warn、error,可以在控制台设置打印那种级别的日志进行过滤信息。

2)断言库

console.assert(1 + 1 > 3, ‘计算失败’); 浏览器自带的断言工具。

3)对象表格展示

console.table({ name: ‘dkvirus’ }); 以表格形式展示对象结构的数据,更加形象生动。

4)分组打印

1
2
3
console.group();
console.log('xxx');
console.groupEnd();

5)计时器

通常用来计算代码执行时间。

1
2
3
4
5
console.time();
for (var i = 0; i < 1000; i++>) {
// ...
}
console.timeEnd();

1.7 window.localStorage

浏览器本地保存数据,除非主动删除,否则一直存在。不过貌似有大小限制,好像是 10M 来着。

属性 说明
localStorage.getItem(key) 获取指定 key 的值
localStorage.setItem(key, value) 设置 key,value 值
localStorage.removeItem(key) 删除指定 key 的值
localStorage.clear() 全部清空

1.8 window.sessionStorage

浏览器用于临时保存数据用,关闭浏览器窗口或关闭其中某个 Tab 页时删除这些数据。

属性 说明
sessionStorage.getItem(key) 获取指定 key 的值
sessionStorage.setItem(key, value) 设置 key,value 值
sessionStorage.removeItem(key) 删除指定 key 的值
sessionStorage.clear() 全部清空

2. 浏览器尺寸相关

2.1 innerWidth 与 innerHeight

浏览器可视窗口宽度和高度,要注意的一点,如果 F12 打开了控制台,是会挤压可视窗口的高度的。

图2

2.2 outerwidth 与 outerHeight

浏览器的外部宽高,包括工具条和滚动条,但是实测 outerWidth 竟然比 innerWidth 小,不明所以??

2.3 pageXOffset 与 pageYOffset

pageXOffset 表示水平滚动条滑动的位置,如果没有水平滚动条,pageXOffset 一直是 0;

pageYOffset 表示垂直滚动条滑动的位置,pageYOffset 为 0 表示垂直滚动条未滑动;

只能获取滚动条的位置值,类似 pageYOffset=1000 设置行为是不生效的。

2.4 screenLeft 与 screenTop

浏览器窗口相对电脑屏幕的位置。screenLeft 表示浏览器左边离电脑屏幕左边的位置;screenTop 表示浏览器上边离电脑屏幕上边的距离。

图1

2.5 screenX 与 screenY

也是表示浏览器窗口距离电脑屏幕的距离。(screenX, screenY) 表示浏览器左上角那个点在电脑屏幕中的坐标,见上图。

二、window 的方法

总共 17 个方法,分为 6 类,有 4 个方法还用不了,实际掌握也就 11 个方法。

1. 定时器方法

1.1 间隔调用函数

每隔 1 秒调用一次函数,如果不做处理,会一直间隔时间段调用函数。

1
2
3
var i = window.setInterval(function () {
console.log(1);
}, 1000)

如果想要停止间隔调用函数,使用 window.clearInterval() 方法。

1
2
// 参数 i 为 setInterval() 返回值
window.clearInterval(i);

1.2 定时调用函数

1 秒后调用函数,函数只会执行一次,这是与 setInterval() 的区别。

1
2
3
var t = window.setTimeout(function () {
console.log(1)
}, 1000)

如果又不想 1s 之后执行函数,使用 window.clearTimeout() 方法。

1
2
// 参数 t 为 setTimeout() 返回值
window.clearTimeout(t);

2. 弹窗方法

2.1 alert()

弹出一个对话框,只有一个确认按钮,常作为提示使用。

window.alert('弹出对话框')

2.2 confirm()

有确认按钮和取消按钮,点击不同按钮可以有不同的处理结果。

1
2
3
4
5
6
7
8
9
10
11
12
function myFunction(){
var x;
var r=confirm("按下按钮!");
if (r==true){
x="你按下了\"确定\"按钮!";
}
else{
x="你按下了\"取消\"按钮!";
}
alert(x)
}
myFunction();

2.3 prompt()

调用 prompt() 方法,弹出一个对话框,用户可以输入信息,prompt() 的返回值接收用户填写的值。

1
2
3
4
5
function myFunction(){
var x;
var person = window.prompt("请输入你的名字","我是默认值");
alert(person);
}

3. 滚动条方法

方法 说明
window.scrollBy(100,100); 水平滚动条往右滚动 100px,垂直滚动条往下滚动 100px
window.scrollTo(100, 100); 水平滚动条往右滚动 100px,垂直滚动条往下滚动 100px

这里的 x,y 说滚动多少像素其实并不严谨。

4. base64 编码

方法 说明
window.btoa('dkvirus:dkvirus') base64 加码字符串,不能加码图片。b -> a 是加码
window.atob('ZGt2aXJ1czpka3ZpcnVz') base64 解码字符串,不能解码图片。a -> b 是解码

5. 窗口相关

方法 说明
window.close(); 会关闭浏览器当前页面
window.open('https://blog.dkvirus.top'); 会打开参数网址的网页
window.print() 打印的当前窗口的内容

open 方法很鸡肋啊,哪里有用到??

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.open('', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, 
menubar=no, scrollbars=no, resizable=no, location=no, status=no')

  '' 为空表示打开一个空窗口,或者为 http 网络地址则打开对应的网页;
  'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替;
  height=100 窗口高度;
  width=400 窗口宽度;
  top=0 窗口距离屏幕上方的象素值;
  left=0 窗口距离屏幕左侧的象素值;
  toolbar=no 是否显示工具栏,yes为显示;
  menubar,scrollbars 表示菜单栏和滚动栏。
  resizable=no 是否允许改变窗口大小,yes为允许;
  location=no 是否显示地址栏,yes为允许;
  status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

6. 窗口大小与移动(浏览器兼容与安全性让它变成废物一个)

15 年 java 培训的时候简单学过 html+css+js,当时这几个 api 还可以用,印象很深老师带我们做了一个模拟 qq 对话框震动的效果。

方法 说明
window.moveTo(x, y) 移动窗口位置,x,y 为窗口左上角点的坐标
window.moveBy(x, y) 相对当前窗口位置进行移动,x,y 为窗口左上角点的坐标
window.resizeBy(x, y) 窗口的宽高每次增加 x,y 值
window.resizeTo(x, y) 窗口的宽高直接设置成 x,y 值

以上四个方法在谷歌浏览器实测并没效果,有人说这是 ie 家的 api,有人说这是由于浏览器自我保护禁用了这两个 API。实际操作发现在 window.open(‘’, ‘’, ‘width=300,height=300’) 打开的空窗口中是有效的,有毛用??

首页
友链
归档
dkvirus
动态
RSS