BOM
BOM 也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准。所以,BOM 本身是没有标准的或者还没有哪个组织去标准它。
一.window对象
BOM 的核心对象是window,它表示浏览器的一个实例。window 对象处于JavaScript 结构的最顶层,对于每个打开的窗口,系统都会自动为其定义window 对象。
1.对象的属性和方法
window 对象有一系列的属性,这些属性本身也是对象。
属性含义
closed 当窗口关闭时为真
defaultStatus 窗口底部状态栏显示的默认状态消息
document 窗口中当前显示的文档对象
frames 窗口中的框架对象数组
history 保存有窗口最近加载的URL
length 窗口中的框架数
location 当前窗口的URL
name 窗口名
offscreenBuffering 用于绘制新窗口内容并在完成后复制已存在的内容,控制屏幕更新
opener 打开当前窗口的窗口
parent 指向包含另一个窗口的窗口(由框架使用)
screen 显示屏幕相关信息,如高度、宽度(以像素为单位)
self 指示当前窗口。
status 描述由用户交互导致的状态栏的临时消息
top 包含特定窗口的最顶层窗口(由框架使用)
window 指示当前窗口,与self 等效
window 对象的方法
alert(text) 创建一个警告对话框,显示一条信息
blur() 将焦点从窗口移除
clearInterval(interval) 清除之前设置的定时器间隔
clearTimeOut(timer) 清除之前设置的超时
close() 关闭窗口
confirm() 创建一个需要用户确认的对话框
focus() 将焦点移至窗口
open(url,name,[options]) 打开一个新窗口并返回新window 对象
prompt(text,defaultInput) 创建一个对话框要求用户输入信息
scroll(x,y) 在窗口中滚动到一个像素点的位置
setInterval(expression,milliseconds) 经过指定时间间隔计算一个表达式
setInterval(function,millisenconds,[arguments]) 经过指定时间间隔后调用一个函数
setTimeout(expression,milliseconds) 在定时器超过后计算一个表达式
setTimeout(expression,milliseconds,[arguments]) 在定时器超过时后计算一个函数
print() 调出打印对话框
find() 调出查找对话框
window 下的属性和方法,可以使用window.属性、window.方法()或者直接属性、方法()的方式调用。例如:window.alert()和alert()是一个意思。
2.系统对话框
浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示信息。系统对话框与浏览器中显示的网页没有关系,也不包含HTML。
//弹出警告 alert('1'); //直接弹出警告 //确定和取消 confirm('请确定或者取消'); //这里按哪个都无效 if (confirm('请确定或者取消')) { //confirm 本身有返回值 alert('您按了确定!'); //按确定返回true } else { alert('您按了取消!'); //按取消返回false } //输入提示框 var num = prompt('请输入一个数字', 0); //两个参数,一个提示,一个值 alert(num); //返回值可以得到 //调出打印及查找对话框 print(); //打印 find(); //查找
defaultStatus = '状态栏默认文本'; //浏览器底部状态栏初始默认值
status='状态栏文本'; //浏览器底部状态栏设置值
3.新建窗口
使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。它可以接受四个参数:1.要加载的URL;2.窗口的名称或窗口目标;3.一个特性字符串;4.
一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。
open('http://www.baidu.com'); //新建页面并打开百度
open('http://www.baidu.com','baidu'); //新建页面并命名窗口并打开百度
open('http://www.baidu.com','_parent'); //在本页窗口打开百度,_blank 是新建
//第三参数字符串 open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes'); //open 本身返回window 对象 var box = open(); box.alert(''); //可以指定弹出的窗口执行alert(); //子窗口操作父窗口 document.onclick = function () { opener.document.write('子窗口输出!'); }
3.窗口的位置和大小
用来确定和修改window 对象位置的属性和方法有很多。IE、Safari、Opera 和Chrome都提供了screenLeft 和screenTop 属性,分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX 和screenY 属性中提供相同的窗口位置信息,Safari 和Chrome 也同时支持这两个属性。
//确定窗口的位置,IE 支持 alert(screenLeft); //IE 支持 alert(typeof screenLeft); //IE 显示number,不支持的显示undefined //确定窗口的位置,Firefox 支持 alert(screenX); //Firefox 支持 alert(typeof screenX); //Firefox 显示number,不支持的同上
//跨浏览器的方法 var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX; var topY = (typeof screenTop == 'number') ? screenTop : screenY;
窗口页面大小,Firefox、Safari、Opera 和Chrome 均为此提供了4 个属性:innerWidth和innerHeight,返回浏览器窗口本身的尺寸;outerWidth 和outerHeight,返回浏览器窗口本身及边框的尺寸。
alert(innerWidth); //页面长度 alert(innerHeight); //页面高度 alert(outerWidth); //页面长度+边框 alert(outerHeight); //页面高度+边框
//调整浏览器位置 moveTo(0,0); //IE 有效,移动到0,0 坐标 moveBy(10,10); //IE 有效,向下和右分别移动10 像素 //调整浏览器大小 resizeTo(200,200); //IE 有效,调正大小 resizeBy(200,200); //IE 有效,扩展收缩大小
4.间歇调用和超时调用
JavaScript 是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码。
超时调用需要使用window 对象的setTimeout()方法,它接受两个参数:要执行的代码和毫秒数的超时时间。
setTimeout("alert('1')", 1000); //不建议直接使用字符串
function box() {
alert('2');
}
setTimeout(box, 1000); //直接传入函数名即可
setTimeout(function () { //推荐做法
alert('3');
}, 1000);
间歇调用与超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval(),它接受的参数与setTimeout()相同:要执行的代码和每次执行之前需要等待的毫秒数。
var box = setInterval(function () { //获取间歇调用的ID alert('1'); }, 1000); clearInterval(box); //取消间歇调用
二.location对象
location 是BOM 对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location 对象是window 对象的属性,也是document 对象的属性;所以window.location 和document.location 等效。
location 对象的属性
hash 如果该部分存在,表示锚点部分
host 主机名:端口号
hostname 主机名
href 整个URL
pathname 路径名
port 端口号
protocol 协议部分
search 查询字符串
location 对象的方法
assign() 跳转到指定页面,与href 等效
reload() 重载当前URL
repalce() 用新的URL 替换当前页面
location.hash = '#1'; //设置#后的字符串,并跳转 alert(location.hash); //获取#后的字符串 location.port = 8888; //设置端口号,并跳转 alert(location.port); //获取当前端口号, location.hostname = 'hello'; //设置主机名,并跳转 alert(location.hostname); //获取当前主机名, location.pathname = 'hello'; //设置当前路径,并跳转 alert(location.pathname); //获取当前路径, location.protocal = 'ftp:'; //设置协议,没有跳转 alert(location.protocol); //获取当前协议 location.search = '?id=5'; //设置?后的字符串,并跳转 alert(location.search); //获取?后的字符串 location.href = 'http://www.baidu.com'; //设置跳转的URL,并跳转 alert(location.href); //获取当前的URL
三.history对象
history 对象是window 对象的属性,它保存着用户上网的记录,从窗口被打开的那一刻算起。
length history 对象中的记录数
back() 前往浏览器历史条目前一个URL,类似后退
forward() 前往浏览器历史条目下一个URL,类似前进
go(num) 浏览器在history 对象中向前或向后
浙公网安备 33010602011771号