BOM api总结

BOM–浏览器对象模型。

window 对象

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
1.浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
2.窗口位置(浏览器相对于屏幕的距离)
var l = window.screenLeft || window.screenX;
var t = window.screenTop || window.screenY;
3.移动窗口(可能被浏览器禁用)
window.moveTo(0, 0);//将窗口移动到(0,0)
window.moveBy(50, 50);//将窗口向下移动50,向右移动50
4.调整窗口大小(可能被浏览器禁用)
window.resizeTo(100, 100);//调整到100 * 100
window.resizeTo(100, 50);//调整到200 * 150
5.导航和打开窗口
window.open();//接收4个参数,要加载的URL、窗口目标、一个特性字符串以及新页面是否取代历史记录中当前页面的布尔值
6.定时器
var timeout = setTimeout(fn, time);
clearTimeout(timeout);
var interval = setInterval(fn, time);
clearInterval(interval);
7.系统对话框
alert('error');//警告框
confirm('你是 Max 吗?');//确认框
prompt('请输入你的年龄','24');//提示框

location 对象

location 属性

属性名 例子 说明
hash “#contents” 返回URL中的hash
host “www.maxmeng.top:80” 返回服务器名称和端口号
hostname “www.maxmeng.top” 返回不带端口号的服务器名称
href http://www.maxmeng.top/ 当前页面的完整URL,location对象的toString()方法也返回这个
pathname “/about/“ 返回URL中的目录和(或)文件名
port “80” 返回端口号,如果URL中不包含端口号,则返回空字符串
protocol “http:” 页面使用的协议
search “?q=javascript” 返回URL中的查询字符串

查询字符串参数

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
function getQueryStringArgs(){
//取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ''),
//保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.split('&') : [],
item = null,
name = null,
value = null,
//在for循环中使用
i = 0,
len = items.length;
//逐个将每一项添加到args对象中
for(i=0; i<len; i++){
item = items[i].split('=');
name = item[0];
value = item[1];
if(name.length){
args[name] = value;
}
}
return args;
}

位置操作

1
2
3
4
5
location.assign(url);//作用同location.href 一样,打开新的url并在历史记录中生成一条记录
location.replace(url);//打开新的url,但不会生成新的历史记录,用户无法返回上一个页面
location.reload();//重新加载页面,如果不需要从缓存中加载,需要传递一个参数 true。

navigator.userAgent 浏览器的用户代理字符串

screen 对象

显示浏览器窗口外部显示器的信息,用处不大。

history 对象

1
2
3
4
5
6
7
8
9
10
//history 对象保存这用户上网的历史记录,从窗口打开的那一刻算起。
history.length;//历史记录的数量
history.go(-1);//后退一页
history.back();//后退一页
history.go(1);//前进一页
history.forward();//前进一页
history.go('maxmeng.top');//跳到最近的 maxmeng.top 页面,如果历史记录中不包含该字符串,则什么也不做