BOM

BOM

BOM(Browser Object Model):浏览器对象模型,提供了一套操作浏览器功能的工具。

window.onload

window.onload事件会在窗体加载完成后执行,通常我们称之为入口函数。

1
2
3
4
window.onload = function(){
//里面的代码会在窗体加载完成后执行。
//窗体加载完成包括文档树的加载、还有图片、文件的加载完成。
}

window.open 打开窗口

1
2
3
4
5
6
7
8
9
//语法:window.open(url, [name], [features]);
//参数1:需要载入的url地址
//参数2:新窗口的名称
//_self:在当前窗口打开
//_blank:在新的窗口打开
//参数3:窗口的属性,指定窗口的大小
//返回值:会返回刚刚创建的那个窗口,用于关闭
//示例:
var newWin = window.open("http://www.baidu.com","_blank", "width=300,height=300");

window.close 关闭窗口

1
2
newWin.close();//newWin是刚刚创建的那个窗口
window.close();//把当前窗口给关闭了

定时器

延时定时器

设置延时定时器

1
2
3
4
5
6
7
8
//语法:setTimeOut(callback, time);
//参数1:回调函数,时间到了就会执行。
//参数2:延时的时间
//返回:定时器的id,用于清除
//示例:
var timer = setTimeOut(function(){
//1秒后将执行的代码。
}, 1000);

清除延时定时器

1
2
3
4
//语法:clearTimeOut(timerId)
//参数:定时器id
//示例:
clearTimeOut(timer);//清除上面定义的定时器

间歇定时器

设置间歇定时器

1
2
3
4
5
6
7
8
//语法:var intervalID = setInterval(func, delay);
//参数1:重复执行的函数
//参数2:每次延迟的毫秒数
//返回:定时器的id,用于清除
//示例:
var timer = setInterval(function(){
//重复执行的代码。
}, 1000);

清除间歇定时器

1
2
3
4
//语法:clearInterval(intervalID)
//参数:定时器id
//示例:
clearInterval(timer);//清除上面定义的定时器

location对象

location对象也是window的一个属性,location其实对应的就是浏览器中的地址栏。

常用属性和方法

location.href:控制地址栏中的地址

1
location.href = “http://www.baidu.com”;//让页面跳转到百度首页

location.reload():让页面重新加载

1
2
location.reload(true);//强制刷新,相当于ctrl+F5
location.reload(false);//刷新,相当于F5

location的其他属性

1
2
3
4
5
6
7
console.log(window.location.hash);//哈希值 其实就是锚点
console.log(window.location.host);//服务器 服务器名+端口号
console.log(window.location.hostname);//服务器名
console.log(window.location.pathname);//路径名
console.log(window.location.port);//端口
console.log(window.location.protocol);//协议
console.log(window.location.search);//参数

【案例:定时跳转.html】

其他对象

window.navigator的一些属性可以获取客户端的一些信息

1
//navigator.userAgent:浏览器版本

history对象表示页面的历史

1
2
3
4
5
6
//后退:
history.back();
history.go(-1);
//前进:
history.forward();
history.go(1);

screen对象

1
2
3
4
console.log(screen.width);//屏幕的宽度
console.log(screen.height);//屏幕的高度
console.log(screen.availWidth);//浏览器可占用的宽度
console.log(screen.availHeight);//浏览器可占用的高度