浏览器对象模型(BOM)

BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页无关。

window对象

BOM的核心是window,而window对象又具有双重角色,它既是通过js访问浏览器窗口的一个接口,又是一个Global(全局)对象。这意味着在网页中定义的任何对象,变量和函数,都以window作为其global对象。

window对象属性

属性 描述
closed 返回布尔值,表示窗口是否关闭
frames 返回当前文档中代表iframe元素的类似矩阵的对象
length 返回当前文档中iframe元素的数量
name 设置或返回窗口的名称
opener 返回创建窗口的基准
parent 返回当前窗口的上级窗口
top 返回当前窗口的最上级窗口
self 返回当前窗口
innerHeight 返回窗口内容领域内高度
innerWidth 返回窗口内容领域内宽度
outerHeight 返回窗口的高度,包括窗口界面上的所有元素
outerWidth 返回窗口的宽度,包括窗口界面上的所有元素
pageXOffset 返回当前文档滚动条在水平方向上的滚动距离
pageYOffset 返回当前文档滚动条在垂直方向上的滚动距离
screenX 返回窗口相对于屏幕的x坐标
screenY 返回窗口相对于屏幕的y坐标
screenTop 返回窗口相对于屏幕的x坐标
screenLeft 返回窗口相对于屏幕的y坐标

windows对象方法

方法 描述
open() 打开新的浏览器窗口
close() 关闭当前浏览器窗口
alert() 显示警告对话窗口
confirm() 显示带有自定义信息、ok、取消按钮的确认对话框
prompt() 显示带有输入框的提示对话框
setInterval() 调用一个函数或者指定时间间隔计算表达式
setTimeout() 调用一个函数或者指定时间计算表达式
clearInterval() 清除使用setInterval()方法设置的计时器
clearTimeout() 清除使用setTimeout()方法设置的计时器
moveBy() 相对于窗口当前坐标位置,根据指定距离移动窗口(相对坐标)
moveTo() 根据指定距离移动窗口(绝对坐标)
scrollBy() 移动窗口滚动条到指定的位置(相对定位)
scrollTo() 窗口滚动条移动到指定的坐标(绝对定位)
resizeBy() 在当前窗口尺寸上追加指定的宽度和高度(相对定位)
resizeTo() 指定窗口的宽度和高度(绝对定位)

NOTE:

  • innerHeight,innerWidth,outerHeight,outerWidth区别
innerHeight,innerWidth,outerHeight,outerWidth区别
innerHeight,innerWidth,outerHeight,outerWidth区别

红色区域为内容区,innerHeight,innerWidth指的是内容区的高度和宽度。包括全部元素的窗口的高度和宽度对应outerHeight,outerWidth。

  • opener属性

窗口创建新的窗口时,使用opener属性返回创建窗口的基准。
使用window.open()方法打开一个窗口时,可以使用opener属性从目标窗口返回源(上级)窗口的 详细信息。
注:使用window.opener.close()关闭源(上级)窗口。

demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>点击以下按钮,打开新窗口并改写上级窗口内容</p>
<button onclick="myFc()">按钮</button>
<script>
function myFc() {
var myWindow = window.open("", "myWindow", "width=200, height=100");
myWindow.document.write("<p>打开的新窗口'</p>");
myWindow.opener.document.write("<p>这是源窗口!</p>");
}
</script>
</body>
</html>
  • open()方法

语法:window.open(url,framename,features,replace)
当framename是已有窗口或框架名,则在该窗口或框架名加载第一个参数url。若不存在则调用framename后面的参数。

framename属性

属性值 描述
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

features属性

属性值 描述
top=number 窗口Y坐标(单位:pixels)不能为负值
left=number 窗口X坐标(单位:pixels)不能为负值
width=number 窗口的文档显示区宽度(单位:pixels)最小值:100
height=number 窗口的文档显示区高度(单位:pixels)最小值:100
resizable=yes/no 窗口大小是否可调,默认值:no
scrollbars=yes/no/ 是否允许滚动,默认值:no
location=yes/no 是否显示地址栏,默认值:yes(设置为no不同浏览器处理方式不同)

其他属性参见下表:

replace属性

布尔值,规定加载的URL是在窗口浏览器历史中创建一个新条目,还是替换浏览器历史中的当前条目。true:加载的URL替换浏览器历史中的当前条目;false:浏览器历史中创建新条目。

location对象

location对象属性

属性 描述 举例
hash 设置或返回以#开头的URL的锚点 #1
host 设置或返回URL的主机名和端口号 www.google.com:443
hostname 设置或返回URL的主机名 www.google.com
href 设置或返回URL的整体 https://www.google.com:443/search?q=dom#1
origin 返回URL的协议,主机名和端口号 https://www.google.com:443
pathname 设置或返回URL的路径 /search
port 设置或返回URL使用的服务器端口号 443
protocol 设置或返回当前文档URL的协议 https:
search 设置或返回当前文档URL的查询字符串部分 ?q=dom

注:以https://www.google.com:443/search?q=dom#1为例

Location对象方法

方法 描述
assign() 载入新的 url,记录浏览记录
replace() 载入新的 url ,不记录浏览记录
reload() false时从浏览器缓存中重载,为true时从服务器端重载,默认为false

NOTE:

  • 设置查询字符串
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
window.$ = function () {
var arr = [];
return arr;
}
$.bom = {
/*类似绝对定位水平垂直居中的原理*/
center: function (url, width, height) {
var left = (window.outerWidth - width) / 2;
var top = (window.outerHeight - height) / 2;
var features = `left=${left}px,top=${top}px,height=${height}px,width=${width}px`;
window.open(url, "_blank", features);
},
/*将查询字符创转换成对象,根据`&`,`=`将字符串转化成相应的数组*/
search: function () {
let result = {};
let searchString = decodeURIComponent(location.search.substr(1)).split("&");
for (let i = 0; i < searchString.length; i++) {
let nameValue = searchString[i].split("=");
result[nameValue[0]] = (nameValue[1] ? nameValue[1] : " ");
}
return result;
},
/*用转化后的对象,先判断name值是否存在,若不存在则追加或输出"undefined";
name值存在则修改对象,遍历或者输出相应的value。*/
reset: function (name, value) {
let resetString = $.bom.search();
let newSearch=``;
if (resetString.hasOwnProperty(name)) {
if (value === undefined) {
return resetString[name];
}
else {
resetString[name] = encodeURIComponent(value);
for (var key in resetString) {
newSearch += `${encodeURIComponent(key)}=${encodeURIComponent(resetString[key])}&`;
}
location.search = newSearch.slice(0,-1);
}
}
else {
if (value === undefined) {
return "undefined";
}
else {
location.search += `&${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
}
}
},
}

history对象

history对象属性

属性 描述
length 返回浏览历史列表中URL的数量

history对象方法

方法 描述
back() 加载浏览历史列表中之前的URL(网址)
forward() 加载浏览历史列表中之后的URL(网址)
go() 从浏览历史列表中加载指定的URL(网址)

screen对象

属性 描述
availHeight 返回屏幕的高度(不包括窗口的任务栏)
availWidth 返回屏幕的宽度(不包括窗口的任务栏)
height 返回屏幕的总体高度
width 返回屏幕的总体宽度
colorDepth 返回屏幕陈列图像时的颜色深度
pixelDepth 返回屏幕的彩色分辨率

NOTE:

  • availHeight,availWidth,height,width区别

粉红色区域的宽高为availHeight,availWidth,屏幕总体高度和宽度为height,width

属性 描述
cookieEnabled 表示cookie是否启用,默认为true
plugins 浏览器中安装的插件信息的数组
userAgent 浏览器的用户代理字符串

NOTE:

  • 判断pc端的userAgent
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var userAgent = window.navigator.userAgent.toLowerCase();
if(userAgent.indexOf('msie') != -1 ||
userAgent.indexOf('trident') != -1 ) {
console.log('您使用的是Internet Explorer!');
} else if(userAgent.indexOf('edge') != -1) {
console.log('您使用的是Edge!');
} else if(userAgent.indexOf('chrome') != -1) {
console.log('您使用的是Google Chrome!');
} else if(userAgent.indexOf('safari') != -1) {
console.log('您使用的是Safari!');
} else if(userAgent.indexOf('firefox') != -1) {
console.log('您使用的是FireFox!');
} else if(userAgent.indexOf('opera') != -1) {
console.log('您使用的是Opera!');
} else {
console.log('无法识别您使用的是哪款浏览器!');
}
  • 判断移动端的userAgent
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
  • 判断是否为微信原生浏览器
1
2
3
function isWeixinBrowser(){
return /micromessenger/.test(navigator.userAgent.toLowerCase())
}