什么是BOM?
BOM即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window
- bom把浏览器当做一个对象来看待
- bom的顶级对象是window
- bom学习的是浏览器窗口窗口交互的一些对象
- bom是浏览器厂商在各自浏览器上定义的,兼容性较差
BOM的构成
window包含document,location,navigation,screen,history
window对象
window是BOM的顶级对象,它具有双重角色
- 它是js访问浏览器窗口的一个接口
- 它是一个全局对象,定义在全局作用域中的变量,函数,都会变成window对象的属性和方法。在调用的时候可以省略window,如alert(),prompt()等
window对象的常见事件
1.窗口加载事件
1. window.onload:当文档内容完全加载完成会触发该事件
常用:window.onload =function(){ }或者
window.addEventListener('load',function(){});
2.document.addEventListener('DOMContentLoaded',function(){}):仅当DOM加载完成时(即不包括样式表,图片,flash)事件即被触发
2 调整窗口大小加载事件
window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数。常和window.innerwidth连用,常利用该事件完成响应式布局。
常用:window.onresize=function(){}或者window.addEventListener('resize',function(){})
3 定时器
1..setInterval():重复调用一个函数,每隔一段时间,就去调用一次该函数
语法规范:window.setInterval(调用函数,延迟时间)
这个调用函数可以直接写函数,或者写函数名等形式
2.停止setInterval()定时器
window.clearInterval(intervalID)
3.setTimeout():设置一个定时器,在定时器到期后执行调用函数。只调用一次
语法规范:window.setTimeout(调用函数,延迟时间)
4. 停止setTimeout()定时器
window.clearTimeot(timeoutID)
eg:
<img src="" class="ad>
<script>
var ad=document.querySelector('.ad');
setTimeout(function(){
ad.style.display='none'},5000);
</script>
location对象
1.location对象的方法
location对象的方法 | 返回值 |
---|---|
location.assign() | 跟href一样,可以跳转页面 |
location.replace() | 替换当前页面 |
location.reload() | 重新加载页面 |
注意:
1.location.assign() 记录浏览历史,可以实现后退功能
2.location.replace()不记录浏览历史
3.location.reload()如果里面参数为true则为强制刷新。
如何获取URL
主要利用location.search;方法
eg:
log.html
<body>
<form action="index.html">
姓名:<input type="text" name="uname">
<input type="submit" value="登录">
<form>
</body>
index.html
<body>
<div></div>
<script>
console.log(location.search);//得到?uname=某某某
var x=location.search.substr(1);//去掉前面的问号
var y=x.split('=');
var z=documnet.querySelector('div');
div.innerHTML = y[1];
</script>
</body>
navigation对象
navigation对象包含有关浏览器的信息,,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值
if((navigator.userAgent.match(/(phone|pad|iPhone...)/i)))
{ window.location.href="";
}else{
window.location.href="";
}
history对象
history对象让我们与浏览器历史记录进行交互,该对象包含用户访问过的URL
history对象方法 | 作用 |
---|---|
back() | 后退功能 |
forward() | 前进功能 |
go() | 前进后退功能,参数如果是1,则前进一个页面,参数如果是-1,则后退一个页面 |
语法:history.back();=history.go(-1);
history.forward();=history.go(1);
screen对象
Screen 对象包含有关客户端显示屏幕的信息。
(没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象。)
screen 对象属性
具体使用:screen.width等等