BOM(浏览对象模型)
BOM概述
BOM (Browser Object Model) 即
浏览器对象模型
,他提供了独立于内容而与浏览器窗口进行交互的对象,其核心是window
浏览器对象模型
window
window对象是浏览器的顶级对象
,它具有双重角色
- 它是js访问浏览器的一个接口
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法,在调用时可以省略window。
window对象6大核心模块:
- document对象,即文档对象
- frames,即HTML自框架
- history,即页面的历史记录
- location,即当前页面的地址
- navigator,包含浏览器相关信息
- screen,用户显示屏幕相关属性
窗口关系及框架
- 如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中
- 可以通过数值索引或者框架名称来访问对应的window对象
- 每个window对象都有一个name属性,其中包含框架的名称
属性 | 意义 |
---|---|
top | 最外(高)层框架 |
parent | 当前的父框架,即当前框架的直接上层框架 |
self | 指向自己,即始终指向window |
窗口位置
screenLeft和screenTop
属性返回窗口相对于屏幕的X和Y坐标(火狐浏览器不支持)
<script>
//获取浏览器距离屏幕左边的距离
console.log('screenLeft' + window.screenLeft);
//获取浏览器距离屏幕上边的距离
console.log('screenTop' + window.screenTop);
</script>
screenX和screenY
属性返回窗口相对于屏幕的X和Y的坐标(IE8浏览器不支持)
<script>
//获取浏览器距离屏幕左边的距离
console.log('screenX' + window.screenX);
//获取浏览器距离屏幕上边的距离
console.log('screenY' + window.screenY);
</script>
pageXOffset和pageYOffset
设置或返回当前页面相对于窗口显示区左上角的X或Y位置
<script>
//获取浏览器当前页面左上角的x位置
console.log('pageXOffset' + window.pageXOffset);
//获取浏览器当前页面左上角的y位置
console.log('pageYOffset' + window.pageYOffset);
</script>
moveTo()
接收的是新位置的x和y坐标值
<script>
//将窗口移动到屏幕左上角
console.log(window.moveTo(0,0););
//将窗口移动到(200,300)
console.log(window.moveTo(200,300););
</script>
moveBy()
接收的是在水平和垂直方向上移动的像素数
<script>
//将窗口向下移动100像素
console.log(window.moveBy(0,100););
//将窗口向左移动50像素
console.log(window.moveBy(-50,0););
</script>
窗口大小
innerWidth
,innerHeight
,outWidth
,outHeight
是所有现代浏览器都支持的属性
outWigth和outHeight(IE8不支持)
返回浏览器窗口自身的大小,和页面窗口大小没关系(不管是在最外层window上使用,还是在窗格中使用)
<script>
console.log('outerHeight:' + window.outerHeight);
console.log('outerWidth:' + window.outerWidth);
</script>
innerWidth和innerHeight(IE8不支持)
返回浏览器窗口中页面视口的大小(计算滚动条高度,不包含浏览器边框和工具栏)
<script>
console.log('innerHeight:' + window.innerHeight);
console.log('innerWidth:' + window.innerWidth);
</script>
document.documentElement.clientWidth 和 document.documentElement.clientHeight(IE8不支持)
返回浏览器窗口中页面视口的宽度和高度(不计算滚动条的高度)
<script>
console.log('clientHeight:' + document.documentElement.clientHeight);
console.log('clientWidth:' + document.documentElement.clientWidth);
</script>
document.body.clientWidth 和 document.body.clietHeight
返回浏览器窗口中页面视口的宽度和高度(计算滚动条的高度)
<script>
console.log('clientHeight:' + document.body.clientHeight);
console.log('clientWidth:' + document.body.clientWidth);
</script>
resizeTo()
用于把窗口大小调整为指定的高度和宽度,接受浏览器窗口新宽度和高度
<script>
//调整到300*300
console.log(window.resizeTo(300,300););
</script>
resizeBy()
用于把窗口大小调整为相对的高度和宽度,接受新窗口与原窗口的宽度和高度之差
<script>
//调整到200*150
console.log(window.resizeBy(100,50););
</script>
打开新窗口
用于打开一个新的浏览器窗口,或查找一个已命名窗口,open(URL,name,specs,replace)
- 第一个参数:打开指定页面的URL地址,若没有指定,则打开一个新的空白窗口
- 第二个参数:指定target属性或窗口的名称
name可选值 | 含义 |
---|---|
_blank | URL加载到一个新的窗口,也是默认值 |
_parent | URL加载到父框架 |
_self | URL替换当前页面 |
_top | URL替换任何可加载的框架集 |
name | 窗口名称 |
- 第三个参数:用于设置浏览器窗口的特征(大小、位置、滚动条等),多个特征之间使用逗号分离
speces可选参数 | 值 | 说明 |
---|---|---|
height | Number | 窗口的高度,最小值为100 |
width | Number | 窗口的宽度,最小值为100 |
left | Number | 该窗口的左侧位置 |
top | Number | 该窗口的上侧位置 |
location | yes/no/1/0 | 是否显示地址字段,默认值是yes |
menubar | yes/no/1/0 | 是否显示菜单栏,默认值是yes |
resizable | yes/no/1/0 | 是否可调整窗口大小,默认值是yes |
scrollbars | yes/no/1/0 | 是否显示滚动条,默认值是yes |
status | yes/no/1/0 | 是否要添加一个状态栏,默认值是yes |
titlebar | yes/no/1/0 | 是否显示标题栏被忽略,除非调用HTML应用程序或一个值得信赖的对话框,默认值是yes |
toolbar | yes/no/1/0 | 是否显示浏览器工作栏,默认值是yes |
- 第四个参数:设置为true,表示代替浏览历史中的当前条目;设置为false(默认值),表示在浏览历史中创建新的条目
window.open("www.cnblogs.com","cnblogs","height=100,width=400")
关闭窗口
与open()
方法功能相反的是close()
方法,用于关闭浏览器窗口,调用该方法的对象就是需要关闭的窗口对象
window.close("www.cnblogs.com","cnblogs","height=100,width=400")
间歇与超时调用
JavaScript是单线程语言,但是可以通过超时值和间歇时间来调度代码在特定时刻执行
setTimeout()超时调用
该方法返回一个数值ID,表示超时调用,是计划执行代码的唯一标识符。
setTimeout(function(){},ms);
- 第一个参数:要执行的代码
- 第二个参数:以毫秒表示的时间
<script>
//在一秒后执行输出语句
var id = setTimeout(() => {
console.log('Hello World');
}, 1000);
console.log(id);
// 清除超时调用
clearTimeout(id);
</script>
setInterval()间歇调用(不常用)
按照指定的时间间隔重复执行代码,直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID,该ID用户可以在将来某个时刻取消
setInterval(function(){},ms)
- 第一个参数:要执行的代码
- 第二个参数:以毫秒表示的时间
<script>
//动态显示时间
var div = document.createElement('div');
// 间歇调用
var id = setInterval(() => {
div.innerHTML = new Date().toLocaleString();
}, 1000);
document.body.appendChild(div);
// 清除计时器
clearInterval(id);
</script>
对话框
警告框alert()
<script>
alert('这是一个警告框~~');
</script>
- 主要用于提醒用户,确保用户可以得到某些信息
- 它只有一个选项:“确定”,返回的布尔值为“true”
- 在点击“确定”之前,不允许进行下一步操作
确认框confirm()
<script>
if (confirm('你喜欢确认框嘛')) {
alert('Yes! ');
}else {
alert('No!');
}
</script>
- 主要用于提示用户是否要进行下一步操作,用于使用户验证某些信息,避免用户不小心删除了某些重要的数据
- 它有两个选项:“确定”和“取消”,它返回两个布尔值:“true”或“false”
- 同样,在点击“确定”或“取消”之前,不允许进行下一步操作
提示框prompt()
<script>
var result = prompt("What's your name?","");
if (result !== null) {
alert('Welcome,'+result);
}else {
alert('亲,您还没输入呢')
}
</script>
- 用于返回输入的信息,或者在进入页面前输入某个值
- 当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能操作
- 点击‘确认’,返回输入的值,点击‘取消’,返回null
location
window对象给我们提供一个
location属性
用于获取或设置窗体的URL
,并且可以用于解析URL,表示方式为也可用window.location
属性
location对象属性 | 返回值 |
---|---|
.hash | 返回一个URL的主要部分,即返回片段#后面内容,常见于锚点、链接 |
.host | 返回主机域名,即服务器名字 |
.hostname | 通常等于host,有时会省略前面的www |
.href | 当前载入页面的完整URL |
.pathname | URL中主机名后的部分,即返回路径 |
.port | 返回端口号,如果未写返回空字符串 |
.protocol | URL中使用的协议,即双斜杠之前的部分 |
.search | 执行GET请求的URL中的问号后的部分,又称查询字符串 |
方法
刷新页面
location.assign()
window.location.assign("http://www.runoob.com")
- 可以跳转页面,加载一个新的文档,跳转到指定URL
location.reload()
- 重新加载当前文档,没有参数或者参数是false,他会检测服务器上的文档是否已经改变。
- 如果文档已改变,reload()会再次下载该文档
- 如果文档未改变,则该方法将从缓存中装载文档
- 如果参数为true,那么会绕过缓存,从服务器中重新下载该文档
location.replace()
window.location.replace("http://www.runoob.com")
- 用一个新文档取代当前文档,
不会在History对象中生成一个新的记录
- 使用该方法时,新的URL会覆盖History对象中的当前记录
navigator
navigator对象包含有关浏览器的信息,没有应用于navigator对象的公开标准,不过所有浏览器都支持该对象
属性
navigator对象属性 | 说明 |
---|---|
appCodeName | 返回浏览器的代码名 |
appName | 返回浏览器的名称 |
appMinorVersion | 浏览器补丁版本 |
appVersion | 返回浏览器的平台和版权信息 |
cpuClass | cpu类型 |
platform | |
操作体系类型 | |
cookieEnabled | 返回指明浏览器中是否启用cookie的布尔值 |
platform | 返回运行浏览器的操作系统平台 |
userAgent | 返回由客户机发送服务器的user-agent头部的值 |
onLine | 用户是否在线 |
systemLanguage | 客户体系语言 |
方法
navigator.javaEnabled()
//返回当前浏览器是否已启用java的布尔值
document.write("启用Java: " + navigator.javaEnabled());
- 所有浏览器都适用
- 指定是否在浏览器中启用java
navigator.taintEnabled()
document.write("启用数据污点: " + navigator.taintEnabled());
- 规定浏览器是否启用数据污点
- 可返回一个布尔值
- 只有Internet Explorer和Opera浏览器支持
screen
属性
screen对象属性 | 说明 |
---|---|
width | 屏幕宽度 |
height | 屏幕高度 |
colorDepth | 屏幕颜色深度 |
availWidth | 可用宽度(不包括任务栏) |
availHeight | 可用高度(不包括任务栏) |
pixealDepth | 屏幕颜色分辨率(每像素的位数) |
history
- 包含用户(在浏览器窗口中)当问过的URL
- 是window对象的一部分,可通过
window.hostory
属性对其访问
属性
history.length
- 历史页面中的URL数量
- 最小为1,最大为50,即只能存50个页面历史记录
方法
history.back() \ history.forward() \ history.go()
- 分别表示跳转至上一个界面、下一个界面、指定页面的上下某个页面
- history.go(-1) = history.back() ; history.go(1) = history.forward()
- history.go(0)当前页面刷新;history.go(2)回到上两个页面
- 使用这三个方法进行页面跳转时,页面会从浏览器缓存中加载,而不是重新加载,不触发onload方法,因此会保存原页面状态