what's BOM
BOM是浏览器对象模型,提供了许多对象,用于访问浏览器的功能,而BOM的核心对象是window对象,表示浏览器的一个实例,在浏览器中,window既是通过Javascript访问浏览器窗口的一个接口,又是ECMA规定的Global对象
关于window对象需要注意的几点
- 全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以.
- 所有在全局作用域中声明的变量,函数都会变成window对象的属性和方法.
- 尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的变量是否存在,即不会抛出错误
window对象常用属性和方法
- window.frames
如果页面中包含框架,则每个框架都有自己的window对象,并且保存在frames集合中,可以通过数值索引或者框架名称来访问相应的window对象
- window.name
每个window对象都有一个name属性,其中包含框架的名称
- window.screenLeft(screenTop) 或window.screenX(screenY
IE,Safari,Opera,Chrome中通过screenLeft和screenTop属性表示窗口相对于屏幕左边和上边的位置
Firfox支持screenX和screenY
注意:IE和Opera是针对页面窗口求值的,其他浏览器是针对浏览器窗口求值的
- window.moveTo(x,y)和window.moveBy(dx,dy)
moveTo为将窗口左上角移到对应的x,y位置上
moveBy是在原来位置上进行对应坐标增减量的修改
- 窗口大小innerWidth,innerHeight,outerWidth,outerHeight
在IE9+,Safari和Firefox中outer-->浏览器窗口本身尺寸,inner-->视口大小
Opera中 outer-->视口大小
Chrome中,outer=inner-->视口大小
跨浏览器获取页面视口的大小:
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
- window.resizeTo(x,y) 和 window.resizeBy(dx,dy)
不用多说,,调整浏览器尺寸大小
- window.open()
接收4个参数:①要加载的URL②窗口目标③一个特征字符串④一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值
若只传递第一个参数:只打开一个新页面
URL+窗口目标:在目标中加载URL,若无此目标,则创建一个新窗口并命名为对应名称后加载
URL+窗口目标+特征字符串:这种情况的窗口目标为不存在,新建窗口根据字符串特征来设置新窗口后加载URL
window.open方法会返回一个指向新窗口的引用,可以对其进行操作,例如可以对其调用close()方法把其关闭,close只适合此种情况,同时其属性closed返回是否关闭的布尔值.其opener属性保存着打开它的原始窗口对象
- window.setTimeout() window.setInterval()
两者均可接受两个参数:要执行的代码和以毫秒计算的时间
调用的代码是在全局作用域中执行的,因此函数中的this的值在非严格模式下指向window对象,严格模式下是undefined
后者若需要停止间歇调用,则可以将其返回的ID传给clearInterval()来取消间歇调用
注意:使用超市调用来模拟间歇调用时一种最佳模式,在开发环境下,很少使用真正的间歇调用,是因为最后一个间歇调用可能会在前一个间歇调用结束之前启动
模拟间歇调用
var num = 0;
var max = 10;
function incrementNumber(){
num++;
if(num<max){
setTimeout(incrementNumber,500);
}else{
alert('Done');
}
}
setTimeout(incrementNumber,500);
location对象常用属性和方法
location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能,还可以将URL解析为独立的片段,让开发人员通过不同的属性来访问这些片段.window对象既是window对象的属性也是document对象的属性,
以下是location对象的所有属性
- hash: 返回URL中的hash(#号后跟0或多个字符),如无hash则返回空字符串
- host: 返回服务器端名称和端口号
- hostname: 返回不带端口号的服务器名称
- href: 返回当前加载页面的完整URL
- pathname: 返回URL中的目录和(或)文件名
- port:返回端口号
- protocol:返回页面使用的协议
- search: 如"?q=javascript" 返回URL的查询字符串,以问号开头
location位置操作 - location.assign("URL") 立即打开新URL并在浏览器的历史记录中生成一条记录,也可以用window.href = "URL"达到相同目的,像这样修改location其他属性值也会引起页面以新URL重新加载
- location.replace("URL") : 与assign等类似,但不会再历史记录中生成新记录,即不能通过后退按钮返回到上一个页面
- location.reload() :没有传入参数的情况下,页面会以最有效的方式重新加载(根据情况从缓存中加载),若需要强行重新加载,则需传入一个布尔值true
navigator对象
navigator对象时识别客户端浏览器的事实标准
navigator提供的一系列属性都是针对浏览器相关信息的获取,平时开发并不那么常用,更多是根据其属性plugins来检测插件,故此不再展开描述
screen对象
screen对象在编程中也不常用,更多是来表明客户端的能力和其显示信息
history对象
history对象保存着用户上网的历史记录,因为history是window对象的属性,因此每个浏览器窗口,每个标签页乃至每个框架都有自己打的history对象与特定的window对象关联
-history.go(-k):后退k页
-history.go(k):前进k页
-history.go(string):此时浏览器会跳转到历史记录中包含该字符串的第一个位置
-history.back(), history.forward(); 后退前进按钮
上文是对高程三一书相关章节的个人总结,如有误解请指出
网友评论