BOM(Browser Object Document)即浏览器对象模型,顾名思义就是为了控制浏览器的行为而出现的接口。浏览器可以做什么呢?比如跳转到另一个页面、前进、后退等等,程序还可能需要获取屏幕的大小之类的参数。而BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面,只需要location.href = "http://www.xxxx.com";
这个 location 就是 BOM 里的一个对象。
BOM提供了许多独立于内容而与浏览器窗口进行交互的对象,包括 Window、Navigator、Screen 、History、Location、弹出框、定时器等等,其核心对象是Window。而Window对象又具有双重角色,它既是通过js访问浏览器窗口的一个接口,又是一个Global(全局)对象。这意味着在网页中定义的任何对象,变量和函数,都以window作为其global对象。
下面为大家介绍一下这几种常见的浏览器对象,以及他们的属性和方法。
window对象
Window 对象是 JavaScript 层级中的顶层对象,代表一个浏览器窗口或一个框架。Window 对象会在 < body> 或 < frameset> 每次出现时被自动创建。
属性和方法 | 描述 |
---|---|
closed | 返回窗口是否已被关闭。 |
innerheight | 返回窗口的文档显示区的高度。 |
innerwidth | 返回窗口的文档显示区的宽度。 |
outerheight | 返回窗口的外部高度。 |
outerwidth | 返回窗口的外部宽度。 |
status | 设置窗口状态栏的文本。 |
self | 返回对当前窗口的引用。等价于 Window 属性。 |
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
close() | 关闭窗口 |
scrollBy() | 按照指定的像素值来滚动内容。 |
scrollTo() | 把内容滚动到指定的坐标。 |
resizeBy() | 按照指定的像素调整窗口的大小。 |
resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
window监听:浏览器窗口大小的改变对页面产生的影响。
<style>
div {
width: 200px;
height: 200px;
background-color: violet;
}
</style>
<script>
window.addEventListener('load', function () {
var div = document.querySelector('div');
window.addEventListener('resize', function () {
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
注意:只要窗口大小发生变化,就会触发这个事件,我们经常利用这个事件完成响应式布局。
Navigator对象
navigator`对象包含大量有关Web浏览器的信息,在检测浏览器及操作系统上非常有用。
属性 | 描述 |
---|---|
appCodeName | 获取浏览器代码名 |
appName | 获取浏览器步伐名 |
appMinorVersion | 获取浏览器补钉版本 |
cpuClass | 获取cpu类型 |
platform | 获取操作体系类型 |
appVersion | 获取浏览器版本(包括体系版本) |
systemLanguage | 获取客户体系语言 |
onLine | 获取用户否在线的信息 |
Screen对象
属性 | 描述 |
---|---|
width | 获取屏幕宽度 |
height | 获取屏幕高度 |
colorDepth | 获取屏幕颜色深度 |
availWidth | 获取可用宽度(除去任务栏的宽度) |
availHeight | 获取可用高度(除去任务栏的高度) |
document.write("用户的屏幕分辨率: ")
document.write(screen.width + "*" + screen.height)
document.write("可用区域大小: ")
document.write(screen.availWidth + "*" + screen.availHeight)
History对象
属性和方法 | 描述 |
---|---|
history.length | 返回历史列表中的网址数 注意:IE和Opera从0开始,而Firefox、Chrome和Safari从1开始。 |
history.back() | 在浏览历史里后退一步 |
history.forward() | 在浏览历史里前进一步 |
history.go(i) | i>0表示向前跳转,i<0表示向后跳转 |
<a href="https://www.baidu.com">百度一下</a>
<button onclick="prew()">上一页</button>
<button onclick="next()">下一页</button>
<button onclick="info()">获取url</button>
<script>
function prew(){
window.history.back();
}
function next(){
window.history.go(1);
}
function info() {
console.log(window.location);
}
</script>
Location对象
window 对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为Location属性返回的是一个对象,所以我们将这个属性也称为对象。
属性和方法 | 描述 |
---|---|
location.href | 获取或者设置整个URL |
location.portocol | 返回URL中使用的协议 |
location.host | 返回服务器名称和端口号 |
location.hostname | 返回服务器名称 |
location.port | 返回端口号(如果没有,返回空字符串) |
location.pathname | 返回路径 |
location.search | 返回参数(查询字符串) |
location,hash | 如果URL包含#,返回该符号之后的内容 |
locatio.assign() | 跳转页面(也称为重定向页面) |
location.replace() | 替换当前页面(因为不记录历史,所以不能后退页面) |
location.reload() | 重新加载页面,相当于刷新按钮 |
<button class="assign">跳转页面</button>
<button class="replace">替换页面</button>
<button class="reload">刷新</button>
<script>
document.querySelector('.assign').addEventListener('click',function(){
// 记录浏览历史,可以实现后退功能
location.assign('http:www.itcast.cn');
});
document.querySelector('.replace').addEventListener('click',function(){
// 不记录浏览历史,不能后退
location.replace('http:www.itcast.cn')
});
document.querySelector('.reload').addEventListener('click',function(){
location.reload()
});
</script>
弹出框
方法 | 描述 |
---|---|
alert(“message”) | 弹出一个具有OK按钮的系统消息框,显示指定的文本。 |
confirm(“Are you sure?”) | 弹出一个具有OK和Cancel按钮的询问对话框,返回一个布尔值。 |
prompt(“What’s your name?”, “Default”) | 提示用户输入信息,将文本框中的值作为函数值返回。 |
定时器
setTimeout()
setTimeout() 我们称之为回调函数,普通函数是按照代码顺序直接调用,而这个函数,需要等待时间,时间到了之后才去调用这个函数,因此称为回调函数。简单理解:回调,就是回头调用的意思,上一件事干完,再回头调用这个函数,比如element.οnclick=function(){}和 element.addEventlistener(‘click’,function(){} )里面的函数都是回调函数。语法规格为:setTimeout(调用函数,延迟时间)
。
setTimeout(function(){
console.log('时间到了');
},2000);
function callback() {
console.log('时间到了');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
<script>
var flag = setTimeout(function(){
console.log(new Date().getTime());
},3000)
document.querySelector("#clear_timeout").onclick = function(){
clearTimeout(flag);
}
</script>
<button id="clear_timeout">取消超时调用</button>
setInterval()
<script>
var index = setInterval(() => {
console.log(new Date().getTime());
}, 2000);
console.log("index:",index)
document.querySelector("#clear_interval").onclick = function(){
clearInterval(index);
console.log("取消成功");
}
}
</script>
<button id="clear_interval">取消间歇调用</button>
拓展1:使用超时调用来模拟间歇调用。
var num=0;
var max=10;
function incrementNum(){
num++;
if(num<max){
alert(num);
setTimeout(incrementNum,500);
}else{
alert("Done"+num);
}
}
setTimeout(incrementNum,500);
拓展2:设计一个定时发送按钮,要求按钮中提示剩余时间。
<button>发送</button>
<script>
var btn = document.querySelector('button');
var time = 3; // 定义剩下的秒数
btn.addEventListener('click', function () {
btn.disabled = true;
var timer = setInterval(function () {
if (time == 0) {
// 清除定时器并且复原按钮
clearInterval(timer);
btn.disabled = false;
//修改按钮中的内容
btn.innerHTML = '发送';
time = 3;
} else {
btn.innerHTML = '还剩' + time + '秒'
time--;
}
}, 1000)
})
</script>