BOM
前言
众所周知,JavaScript对象是由ECMAScript,DOM和BOM组成,DOM和BOM都是具有功能的对象模型,DOM(文档对象模型)映射成多层次的dom节点,并提供了一系列操作DOM的方法功能,而BOM则是支持访问和操作浏览器窗口对象的一系列功能.
BOM的核心--window对象
BOM的核心是window对象,它代表浏览器的一个实例,在浏览器中,window既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.
比如在全局作用域中定义的变量和函数会自动归在window对象名下.但是有一点区别在于:直接定义的全局变量不能通过delete操作符删除(使用var添加的属性有一个configurable特性,这个特性被设置为false)
窗口以及框架
框架
<frameset>
<frame src="" name="topFrame">
<frameset>
<frame name="leftFrame"></frame>
<frame name="rightFrame"></frame>
</frameset>
</frame>
</frameset>
在上述代码中,定义一个框架集,一个框架居上,两个框架居下,每个框架都拥有自己的window对象,并且保存在frames中
对于框架的引用,既可以通过window.frame[0]来引用上方框架,也可以使用top对象(始终指向最高层的框架,也就是浏览器窗口)来引用,top.frame[0]
此外还有一个window对象是parent对象,它始终指向当前框架的直接上层框架
self对象始终指向window,实际上,self和window对象可以互换使用
窗口
确定窗口位置的方法:
- window.screenLeft和window.screenTop表示窗口相对于屏幕左边和上边的位置,适用于IE,Safari,Opera和Chrome
- window.ScreenX和window.ScreenY提供相同的窗口位置信息,适用于Safari,Opera和Firefox
由于浏览器不一致,无法精准计算窗口位置
确定窗口大小的方法:
- innnerWidth,innerHeight表示该容器中页面视图区的大小(减去边框宽度)
- outerWidth,outerHeight返回浏览器窗口本身的尺寸,但在
Opera中,这两个属性表示页面视图容器的大小.
ps:在chrome中,这四个属性都返回相同的值,即都为视口大小而非浏览器窗口大小
获取视口大小的方法:
- document.documentElement.clientWidth和document.documentElement.clientHeight保存了页面视口的信息
- document.body.clientWidth和document.body.clientHeight获取相同信息(ie6中混杂模式使用)
导航和打开窗口
window.open(url,窗口目标,一个特性字符串,一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值)
第二个参数选择窗口或框架的名称,就会在该窗口或框架加载指定url
第三个参数是一个逗号分隔的设置字符串,表示显示特性
间歇调用和超时调用
- setTimeout(要执行的代码建议回调函数,等待的时间),经过该时间后指定的代码不一定会执行,而是会被添加仅任务队列,如果队列是空的,就会立刻执行,该方法会返回一个超时调用的数字ID,可以用它取消超时调用,使用clearTimeout()方法并将超时调用ID传给它即可
- setInterval(),它会按照指定的时间间隔重复执行代码,该方法同样返回一个间歇调用ID,使用clearInterval()并传入间歇调用ID即可取消
location对象
location对象提供了与当前窗口中加载的文档有关的信息,并将URL解析成独立的片段,还提供了一些导航功能,而且它即使window对象的属性,也是document对象的属性
- location.search(),可以通过substring()和split()等方法进行切割,返回每个参数
- location.assign(),可以立即打开新URL并在浏览器的历史记录中生成一条记录
- location.replace(),导航到对于URL页面,但不会生成历史记录
- location.reload(),重新加载当前显示的页面
navigator对象
识别客户端浏览器的事实标准
navigator.plugins来检测插件
此外还有screen对象和history对象就不说了