JS语言是BS开发中负责页面动态效果的一种脚本语言,既然如此,自然少不了有关浏览器页面的知识,BOM:浏览器对象模型,涉及到有关JS中操作浏览器页面的一些基本知识。在这里最核心的对象就是window,它包含六大属性,其中这些属性本身也是对象。
通过图中,可以看出来,在window中我们最常用的就是window中的document对象即DOM(后面单独总结)。这里仅简单的总结一下有关window对象中的相关方法和使用。
一、系统对话框
此方法主要用于与用户交互,起到一个提示用户的作用。在BOM弹出窗口中,主要涉及到三个:
alert():相当于vb中的msgbox()的最简单形式,被经常用于JS中进行测试。
prompt():输入提示框,类似于inputbox
confirm():确定和取消,msgbox也可以实现此功能
二、位置和大小
主要指获取窗口的一个大小和位置。此处需要与DOM中的元素的位置和大小进行区分。
1、大小 :用来获取浏览器窗口大小
非IE:
innerWidth/Height:不包括菜单栏,工具栏和边框的大小,只是页面显示部分的大小。
outerWidth/Height:整个窗口的当前的尺寸,包括菜单栏、工具栏和边框。
IE:可利用clientWidth/Height来获取元素的实际大小,这里和DOM中获取元素的大小有很多关联的地方,后面总结。
2、位置:获取浏览器当前位置,距离左边和顶端的距离。
非IE:screenLeft/Top
IE:screenX/Y
这些是最基本的获取窗口的位置和大小的表示,可以和DOM中获取元素尺寸和位置来进行区分比较。通常会在设置元素居中显示时用到,在使用时,要涉及到各个浏览器的兼容问题,另外还可利用moveTo(,),moveBy(,)resizeTo(,) resizeBy()对元素进行移动等。
三、常用方法
JS是单线程语言,不支持多线程,因此,它提供了两种方法专门儿用于延迟加载和间歇调用
1、超时调用
setTimeout(执行的方法,延迟的时间) //含有括号中的两个参数
哪里可以用得到呢?
实战:JS中的粘贴(paste)触发事件发生在粘贴到目标区域之前,那么如果想要在粘贴事件之后触发想要执行的方法,此时,我们就可以用到延迟加载来实现此功能。
var box=function(){setTimeout(alert('粘贴成功!'), 50)}; //默认单位毫秒,事件绑定代码略
此方法默认返回一个ID值,JS还提供了 clearTimeout()方法可用于取消超市调用,使用时,只需将需要取消方法的ID(返回值)赋给clearTimeout作为参数即可。
clearTimeout(box);
2、间歇调用
setInterval(执行的方法,间歇时间),用法同上,同时可利用clearInterval()来取消间歇调用。
3、操作父窗口
在使用浏览器时,会经常遇到在弹出子窗口中去触发父窗口的情况,JS中open()方法用来打开一个新的子窗口,同时,默认父窗口的标识为opener,可在子窗口中添加事件,来触发父窗口相应。
document.onclick = function () { opener.document.write('子窗口让我输出的!'); }
总结:以上是有关window对象中最常用到的一些基础,在学习这一部分时,要避免与DOM中的一些知识混淆比如获取元素尺寸和大小等。因为二者很多属性是可以共用的。比如:location可以获取当前URL,具有导航功能,可以进行页面跳转,此为BOM中的其它对象在平常我们使用浏览器时便常常用到,比如history对象用来查看历史信息等。