首页 > 代码库 > (一)、BOM:Browser Object Model
(一)、BOM:Browser Object Model
BOM
window
打开关闭窗口
窗口大小和窗口位置
****定时器
(一)、BOM:Browser Object Model
浏览器对象模型:用来访问和操作浏览器窗口,使JS有能力与浏览器交互。
专门操作浏览器窗口的API——没有标准,有兼容性问题
浏览器对象模型的主要对象
window:代表整个窗口是BOM的根对象
2个角色:1、代替global称为全局作用域对象
2、封装所有DOM API 和BOM API
以下为window的子对象
1、history:封装当前窗口打开后,成功访问过的历史URL记录
2、navigator:封装浏览器配置信息
3、document:封装当前正在加载的网页内容
4、location:封装了当前窗口正在打开的URL地址
5、screen:封装了屏幕的信息
6、event:定义了网页中的事件机制
一、window
1、window对象:
1、window对象概述
2、窗口与对话框
i、窗口的打开与关闭
II、窗口大小与定位
III、对话框
3、定时器
I、定时器
II、周期性定时器
III、一次性定时器
2、窗口与对话框
1、打开和关闭窗口
打开窗口:var pop=window.open("url","name",config);
1、在当前窗口打开新的链接,允许后退
html:<a href="http://www.mamicode.com/url"
js:/*window.*/open("url","_self")
2、在新窗口打开新链接,禁止后退
html:做不到
js: location.replace(url) 将url替换而不能后退
3、在新窗口打开新链接,可重复打开多个
HTML:<a href="http://www.mamicode.com/url" target="_blank"
js:open("url"/*,"_blank")
4、在新窗口打开新链接,只能打开一个
html:<a href="http://www.mamicode.com/url" target="aname"
js:open("url","aname" )
5、关闭窗口
close() //关闭当前窗口
self.close() //关闭当前窗口
xxWindow.close() //关闭指定窗口
每个窗口在内存中都有一个name属性,
(自己不要起变量名name),
name属性是内存中唯一标识一个窗口的名称
浏览器规定:相同name的窗口只能打开一个(4)
后打开的会替换前先打开的
何时指定name:
a元素的target属性中写的就是新窗口的name属性
open()方法的第二个参数,就是新窗口的name属性
name属性可自定义,也可以使用预定义值:_blank _self..
2、窗口大小和窗口位置
1、窗口大小
获取当前窗口大小:
完整窗口大小:window.outerWidth/outerHeight
文档显示区大小:window.innerWidth/innerHeight
显示器的完整分辨率:screen.height/width
显示器除了任务栏的分辨率:screen.availHeight/Width
设置窗口大小:
1、在打开窗口时:
var pop=window.open("url","name",config);
其中:config="left=?top=?width=?height=?" 表示
文档显示区 的大小。
返回值:返回弹出窗口的window对象
比如:pop->就是小窗口的window
2、修改已打开的窗口大小
.resizeTo(width,height): 修改到指定大小(完整窗口)
.resizeBy(width增量,height增量):让窗口增大多少
强调:只能修改在弹出时就已经修改大小的窗口,不能改默
认全屏的当前窗口
2、窗口定位
获取窗口相对于屏幕左上角的位置:
window.screenLfet/screenTop 左上角x坐标/y坐标
window.screenX/screenY
event.screenX/Y: 事件发生时,鼠标距离距离显示器左上角的坐标 (X,Y)
修改已经打开的窗口的位置:
moveTo(newX,NewY); 坐标
moveBy(left的增量,top的增量)
3、对话框
window对象提供了三种对话框
1、window.alert(msg) //弹出一个警告框
2、window.prompt(msg,[value]) //弹出一个输入提示框
3、window.confirm(msg) //弹出一个确认框
3、定时器****
1、定时器
1、定时器:让程序按指定时间间隔自动执行任务,多用于网页动态时钟、制作倒计时、
跑马灯效果等。
2、周期性定时器:以一定时间间隔执行代码,循环往复
3、一次性定时器:在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行
2、周期性定时器
让程序按指定时间间隔反复自动执行一项任务
何时:动画
方法:3步
1、任务函数: function task(){...}
2、启动定时器:将任务函数放入定时器,并设定时间间隔
timer=setInterval(task,ms) task即为执行任务,ms表示时间周
期(单位ms)
3、停止定时器:
clearInterval(timer);timer=null;
2种方式停止:
1、手动停止:clearXXX(timer)
2、自动停止:在任务函数中设定临界值,如果达到临界值,自动调用
clearInterval(timer).
3、一次性定时器
让程序先等待一定时间间隔,在执行一次任务。执行后自动停止(一次性触发代码)。
何时:延迟任务的执行
方法:3步
1、任务函数:function task(){....}
2、启动定时器:timer=setTimeout(task,ms)
3、停止: clearTimeout(timer)
定时器的选择:只要反复执行,就用周期性定时器
只要执行一次,就用一次性定时器
定时器的原理****:
定时器中的回调函数,必须在所有主程序执行完,也就是主程序最后一句话之后,
才能执行
(一)、BOM:Browser Object Model