什么是BOM?
(Browers Object Model)浏览器对象模型
BOM的结构:
window
|__ Document 文档对象 （DOM）
|
|__ frames 框架集
|
|__ history 历史信息对象
|
|__ navigator 浏览器信息对象
|
|__ locatin 地址栏信息对象
|
|__ screen 屏幕对象
window:
- 浏览器信息对象,也是前端最大的对象
Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
注释：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
JS中许多方法都是window的属性方法,如alert()它的全称应该是window.alert(),不错,window的方法可以省略主语
下面我们看几个较常用的window方法:
定时器:
开启一个定时器:setInterval()
setInterval(要调用的函数或代码,执行周期(以毫秒记))
//创建一个定时器,其周期为1000毫秒执行一次
setInerval(function(){
var i = 0;
console.log(i++);
},1000);
关闭一个定时器:clearInerval()
clearInerval(要关闭的定时器)
//若是要关闭定时器,则定时器需赋给一个变量才可
var time = setInerval(function(){
var i = 0;
console.log(i++);
},1000)
//将需关闭的定时器传进来
clearInerval(time);
注: 在遇到某些如可点击的情况时,连续点击会重复开启定时器,使定时紊乱,这时候我们只需在重复开启时关闭上一个定时器即可
document.onclick = function(){
clearInerval(time);//点击时会先关闭上一个定时器
var time = setInerval(function(){
var i = 0;
console.log(i++);
},1000)
};
延时器:
设置一个延时器:setTimeout()
setTimeout(调用的函数或执行的代码,执行前等待的毫秒数)
//设置一个延时器,让代码在一秒后执行
setTimeout(function(){
console.log("我一秒后才出来");
},1000);
同样有取消延时:clearTimeout()
浏览器窗口:
打开一个新的浏览器窗口:open()
-
window.open(窗口地址,特征列表,新窗口的特征,布尔值)
注意: JS中有window.open()和Document.open()两种方法,他们的作用完全不同,window.open()也可以写成open(),但是为了表达清楚,建议写全
window.open("https://www.baidu.com/","百度一下","width=300,height=300",false)
//除了最后一个参数,其余都是字符串
//第一个参数是新窗口的地址
//第二个参数是由逗号分隔的特征列表,包括数字字母下划线,它声明了新窗口的名称
//第三个参数声明了新窗口要显示的浏览器特征
//第四个参数规定他在浏览历史的条目,如:
//true - URL 替换浏览历史中的当前条目。false - URL 在浏览历史中创建新的条目。
具体可访问:
HTML DOM open() 方法
浏览器窗口大小:
和window.open()方法相配套的有两个方法:
把窗口的大小调整到指定的宽度和高度resizeTo()
resizeTo(width,height)
//在含有open或被打开的窗口设置resizeTo
resizeTo(300,300);
//新打开的窗口大小就为300px,300px
按照指定的像素调整窗口的大小resizeBy()
resizeBy(width,height)
//第一个参数是必须要有的,第二个参数是可选的他们的值正负皆可
setInerval(function(){
resizeBy(100,100);
},1000);
//每过一秒钟,新窗口宽高分别增加100px
注意:在浏览器打开新窗口等操作需要拥有相应权限,所以讲resize这两个方法写在新窗口打开的页面文档中相对简单容易
浏览器窗口移动:
把窗口的左上角移动到一个指定的坐标moveTo()
moveTo(新位置的x坐标,新位置的y坐标)
moveTo(300,300)
//将浏览器窗口左上角移动到pingm300,300的位置
相对窗口的当前坐标把它移动指定的像素
moveBy(向右移动的距离,向下移动的距离)
moveBy(300,300)
//将浏览器窗口向右且向下移动300px
注意:浏览器窗口的移动不会超出屏幕
窗口滚动:
将窗口内容滚动到指定坐标:scrollTo()
scrollTo(窗口文档区左上角x坐标,窗口文档区左上角y坐标)
document.onclick = function(){
scrollTo(0,3000)
}
//将body高度设置为6000,出现滚动条,点击窗口,滚动条会差不多居中
将按照口指定像素滚动
scrollBy(向右滚动距离,向下滚动距离)
document.onclick = function(){
scrollBy(0,100)
}
//同样将body设置为6000,每点击一次,滚动条滚动一小段距离