一、BOM概述
1.1、什么是BOM
BOM是browser object model的缩写,简称浏览器对象模型。
BOM提供了独立于内容而与浏览器窗口进行交互的对象。
由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window。
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C。
BOM最初是Netscape浏览器标准的一部分。
1.2、BOM层次结构
window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。
1.3、BOM可以实现的功能
BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。
但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象,以使得我们可以通过这个入口来使用DOM的强大功能!
二、Window对象
2.1、Window对象的使用
window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。
Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中,Window 对象是全局对象,所有的表达式都在当前的环境中计算。也就是说,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来使用。例如,可以只写document,而不必写 window.document。
同样,可以把当前窗口对象的方法当作函数来使用,如只写 alert(),而不必写 Window.alert()。
示例:
document.write(“www.dreamdu.com”);
window.document.write(“www.dreamdu.com”);
也就是说调用window对象的属性或方法可以省略window。
2.2、三种弹出框(重点)
1、alert():显示带有一段消息和一个确认按钮的警告框。
<script>
alert("带一条消息和确定按钮的弹出框");
</script>
2、confirm():显示带有一段消息以及确认按钮和取消按钮的对话框.返回值为布尔值;如果点击确定则返回true,点击取消返回false。
<script>
confirm("带有一段消息以及确认按钮和取消按钮的对话框");
</script>
3、prompt():显示可提示用户输入的对话框。第一个参数是提示,第二个参数是默认值(可选);返回值为输入的值,取消返回null;需要注意的是,返回的输入值是一个string类型的数据。
<script>
prompt("请输入您的姓名:",”例如:张三”);
</script>
2.3、窗体控制
1、open():打开一个窗体
语法:window.open(URL,name,[specs]),该方法返回打开窗口的引用
参数介绍:
URL 可选。打开指定的页面的URL。如果没有指定URL,打开与新的空白窗口
name 可选。指定窗口的名称。
specs 一个逗号分隔的项目列表。支持以下值:
height=pixels 窗口的高度。最小.值为100
left=pixels 该窗口距离屏幕左侧的位置
top=pixels 该窗口距离屏幕顶部的位置
width=pixels 窗口的宽度.最小.值为100
注:窗口相对位置是以屏幕为基准。
<script>
window.open("page.html","newWind","width=520,height=420,left=100,top=30")
</script>
2、close():关闭浏览器窗口。
3、moveBy():可相对窗口的当前坐标把它移动指定的像素。
window.moveBy(x,y)
x 要把窗口右移的像素数,可以是正、负数值。
y 要把窗口下移的像素数,可以是正、负数值。
4、moveTo():把窗口的左上角移动到一个指定的坐标。
window.moveTo(x,y)
x 窗口新位置的 x 坐标,可以是正、负数值。
y 窗口新位置的 y 坐标,可以是正、负数值。
5、resizeTo():把窗口的大小调整到指定的宽度和高度。
resizeTo(width,height)
width 必需。想要调整到的窗口的宽度。以像素计。
height 可选。想要调整到的窗口的高度。以像素计。
注: 有最小值
6、resizeBy():按照指定的像素调整窗口的大小。
resizeBy(width,height)
width 必需。要使窗口宽度增加的像素数。可以是正、负数值。
height 可选。要使窗口高度增加的像素数。可以是正、负数值。
注: 有最小值
7、focus():把键盘焦点给予一个窗口。可确保新的窗口得到焦点。
2.4、窗体滚动
1、scrollBy(xnum,ynum):按照指定的像素值来滚动内容。
xnum 把文档向右滚动的像素数。
ynum 把文档向下滚动的像素数。
<script type="text/javascript">
function scrollWindow() {
window.scrollBy(30,30)
}
</script>
2、scrollTo(xpos,ypos):把内容滚动到指定的坐标。
xpos 要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 要在窗口文档显示区左上角显示的文档的 y 坐标。
<script type="text/javascript">
function scrollWindow() {
window.scrollTo(0,0)
}
</script>
2.5、窗体打印
print():打印当前窗口的内容。
调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮。通常,这会产生一个对话框,让用户可以取消或定制打印请求。
2.6、定时器(重点)
window对象中处理时间和间隔的函数有4个:setTimeout()函数、clearTimeout()函数、setInterval()、clearInterval()。
2.6.1、延时型定时器
setTimeout():定义延时定时器,在指定的时间后调用函数
语法:
setTimeout(fun,time);
其中参数fun:函数体或函数名;time指定时间,单位为毫秒。其返回值有一个id,代表当前的这个setTimeout()函数。
clearTimeout(id):清除延时定时器,取消指定id的setTimeout函数。
示范代码:
setTimeout(function () {
document.write("隔3秒后触发");
}, 3000) //在3秒后输出
setTimeout(fun1, 5000); //在5秒后输出
function fun1() {
document.write("函数名的方式5秒后触发");
}
2.6.2、间隔型定时器
setInterval():定义间隔型定时器,在间隔指定的事件后重复调用函数。
语法:
setInterval(fun1,time)
fun:函数体或函数名,time指定的时间,单位为毫秒。会返回一个值id。
clearInterval(id):清除间隔型定时器
参数id是setInterval()函数返回的值,根据这个值可以停止返回值为idsetInterval()的执行。
示范代码:
var h = setInterval(function () {
document.write("3秒输出一次<br/>");
}, 3000);
注意,JavaScript是单线程的,因此,这个定时函数实际上是通过插入执行队列的方式来实现。
2.6.3、动态时间效果
由于涉及到时间的显示问题,所以要用到日期对象Date,还有时间在不停地走,因此需要不断地调用函数,所以要用到Windows的定时器setInterval( )方法。
<script>
function disptime(){
var today = new Date(); //获得当前时间
var hh = today.getHours(); //获得小时、分钟、秒
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML=hh+":"+mm+":"+ss;
}
window.setInterval(disptime,1000);
</script>
2.7、window对象常用属性(重点)
innerWidth 返回窗口的文档显示区的宽度。
innerHeight 返回窗口的文档显示区的高度。
name 设置或返回窗口的名称。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部宽度。
三、History对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
3.1、History对象属性
属性 | 说明 |
---|---|
length | 返回当前窗口历史列表中的网址数 |
3.2、History对象方法
方法 | 说明 |
---|---|
back() | 加载 history 列表中的前一个 URL |
forward() | 加载 history 列表中的下一个 URL |
go(num) | 加载 history 列表中的某个具体页面 |
History对象:back() 方法
back() 方法可加载历史列表中的前一个 URL(如果存在)。
调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。
History对象:forward() 方法
forward() 方法可加载历史列表中的下一个 URL。
调用该方法的效果等价于点击前进按钮或调用 history.go(1)。
History对象:go() 方法
go() 方法可加载历史列表中的某个具体的页面。
该参数可以是数字,使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。(-1上一个页面,1前进一个页面)。或一个字符串,字符串必须是局部或完整的URL,该函数会去匹配字符串的第一个URL。
history.go(number|URL)
四、Location 对象(记)
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分,可通过 window.location 属性对其进行访问。
4.1、Location对象属性
属性 | 描述 |
---|---|
hash | 返回一个URL的锚部分(锚点) |
host | 返回一个URL的主机名和端口 |
hostname | 返回URL的主机名 |
href | 返回完整的URL |
pathname | 返回的URL路径名。 |
port | 返回一个URL服务器使用的端口号 |
protocol | 返回一个URL协议 |
search | 返回一个URL的查询部分 ?之后 |
4.2、Location对象方法
方法 | 说明 |
---|---|
assign() | 载入一个新的文档 location.assign(URL) |
reload() | 重新载入当前文档 location.reload(); |
replace() | 用新的文档替换当前文档 location.replace(newURL) |
window.location.assign(url) : 加载 URL 指定的新的 HTML 文档。就相当于一个链接,跳转到指定的url,当前页面会转为新页面内容,可以点击后退返回上一个页面。
window.location.replace(url) : 通过加载 URL 指定的文档来替换当前文档,这个方法是替换当前窗口页面,前后两个页面共用一个窗口,所以是没有后退返回上一页的
五、Screen 对象
Screen 对象包含有关客户端显示屏幕的信息。
属性 | 说明 |
---|---|
availHeight | 返回屏幕的高度(不包括Windows任务栏) |
availWidth | 返回屏幕的宽度(不包括Windows任务栏) |
colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
height | 返回屏幕的总高度 |
pixelDepth | 返回屏幕的颜色分辨率(每像素的位数) |
width | 返回屏幕的总宽度 |
六、Navigator 对象(记)
Navigator 对象包含有关浏览器的信息。
属性 | 说明 |
---|---|
appCodeName | 返回浏览器的代码名appCodeName 属性是一个只读字符串,声明了浏览器的代码名。在所有以 Netscape 代码为基础的浏览器中,它的值是 “Mozilla”。为了兼容起见,在 Microsoft 的浏览器中,它的值也是 “Mozilla”。 |
appName | 返回浏览器的名称 |
appVersion | 返回浏览器的平台和版本信息 |
cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
platform | 返回运行浏览器的操作系统平台 |
userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
说明:
1.navigator.appCodeName:IE/Firefox/Chrome 系列浏览器中,它的值都是 “Mozilla”。
2.navigator.appName:IE/Firefox/Chrome 系列浏览器中 均为 Netscape。
七、Frames对象
frames 属性返回窗口中所有命名的框架。
该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>
。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意,frames[] 数组中引用的框架可能还包括框架,它们自己也具有 frames[] 数组。