BOM(浏览器对象模型),提供了独立于页面内容而与浏览器窗口进行交互的对象。使用BOM,开发者可以移动窗口、改变状态栏的文本以及执行其他与页面内容不直接的动作。BOM由一系列相关的对象构成。
一、window 对象
window对象是整个BOM的核心,所有对象和集合都以某种方式与window对象关联。
1.窗口操作
window对象调整窗口的大小和位置:
1)window.moveBy(dx,dy)--将浏览器窗口相对当前位置水平或垂直移动(px)到指定的距离(相对定位);
2)window.moveTo(x,y)--移动浏览器窗口,使它的左上角位于屏幕的(x,y)处,可使用负数(绝对定位);
3)window.resizeBy(dw,dh)--相对于浏览器窗口当前的大小改变为指定的宽度和高度(px),当为负数时,窗口则缩小(相对调整窗口大小)
4)window.resizeTo(w,h)--调整窗口为指定的宽度和高度,不能为负数。
2.打开新窗口
height:窗口的高度,单位像素;
width:窗口的宽度,单位像素;
Left:窗口的左边缘位置;
top:窗口的上边缘位置;
fullscreen:是否全屏,默认值no;
location:是否显示地址栏,默认值yes;
menubar:是否显示菜单栏,默认值yes;
resizable:是否允许改变窗口大小,默认值yes;
scrollbars:是否显示滚动条,默认值yes;
status:是否显示状态栏,默认值yes;
titlebar:是否显示标题栏,默认值yes;
toolbar:是否显示工具条,默认值yes;
3.系统对话框
1)window.alert--显示消息提示框
Window.alert([message])
2)window.confirm--显示一个确认提示框,点击Ok按钮是返回true,点击Cancel按钮时返回false;
window.confirm([message])
3)window.prompt--显示一个文本输入消息框,此方法接受两个参数,即要显示给用户的文本和文本框中的默认文本(可为空);
window.prompt([message],[default])
4.状态栏
浏览器状态的显示信息可以通过window.status属性直接进行修改。
window.status="[message]"
5.时间间隔和暂停
定时操作通常有两种使用目的,一种是周期性的执行脚本,如时钟;另一种则是将某个操作延时一段时间执行。window.setTimeout函数使其延时执行,且后面脚本正常运行。
1)window.setInterval--用于设置定时器,每隔一段时间执行指定代码;
window.setInterval(执行代码,等待的毫秒数)
2)window.clearInterval--用于清除setInterval函数设定的定时器;
window.clearInterval(阻止执行的代码id)
3)window.setTimeout--用于设置定时器,在一段时间之后执行指定代码;
window.setTimeout(执行代码,等待的毫秒数)
4)window.clearTimeout--用于清除setTimeout函数设定的定时器;
window.clearTimeout(阻止执行的代码id)
6.历史
window.history访问浏览器窗口的历史,可使用length属性查看历史中的页面数,alert(history.length);
window.history.go(前进为正数/后退为负数)/history.go(前进为正数/后退为负数)
history.back()--返回一页
history.forward()--前进一页
二、document 对象
document 对象实际上是window 对象的属性,window 对象的任何属性和方法都可以直接访问。
document 对象的集合:
anchors:页面中所有锚的集合(由<a name=”anchorname”></a>表示);
applets:页面中所有applet的集合;
embeds:页面中所有嵌入式对象的集合(由<embed/>标签表示);
forms:页面中所有表单的集合;
images:页面中所有图像的集合;
links:页面中所有链接的集合(<a href=”somewhere.html”></a>表示);
1)document.write/writeIn()--在当前文档中输入文字(writeIn比write末尾多一个换行);
document.write/writeIn(text)
2 )document.open和document.close是一组方法,通常与document.write/writeIn方法配合使用。
document.open--打开文档准备写入内容;
document.close--用于关闭文档,同时将写出内容输出到页面;
三、location 对象
location.href是最常用的属性,用于获取或设置窗口的URL,改变该属性的值,就可导航到新的页面:
location.href=”http://www.baidu.com/“;
location.assign()方法实现的是同样的操作:
location.assign(”http://www.baidu.com/“);
location.reload()方法有两种模式,即从浏览器缓存中重载(false),或从服务器端重载(true);
四、navigator 对象
navigator 对象包含了关于Web浏览器的信息,浏览器的类型、版本信息都可以从对象中获取。
五、screen 对象
screen 对象用于获取某些关于用户屏幕的信息;
screen 对象的属性:
availHeight:窗口可以使用的屏幕高度(px),其中包括操作系统元素(如window工具栏)需要的空间;
availWidth:窗口可以使用的屏幕宽度(px);
colorDepth:用户表示颜色的位数;
height:屏幕的高度(px);
width:屏幕的宽度(px);