1. window对象
1.1 全局作用域
BOM的核心对象是window,它表示浏览器的一个实例。由于window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量、函数都是window对象的属性和方法,例如:
function myfunc() { alert("Hello World!"); } window.myfunc();
1.2 窗口和框架
如果页面中包含框架,那么每个框架都拥有自己的window对象,并保存在frames集合中,可以通过数值索引(0开始)或者框架名称来访问相应的window对象。
<frameset> <frame src="frame1.html" name="top"/> <frameset> <frame src="frame2.html" name="left"/> <frame src="frame3.html" name="right"/> </frameset> </frameset>
以上代码创建一个框架集,可以通过window.frames[0]或window.frames["top"]来引用第一个框架。不过,最好使用top而非window,例如top.frames[0]。
top对象始终指向最外层的框架,也就是浏览器窗口,使用它可以确保在一个框架中正确访问另一个框架。与top相对的是另一个window对象parent,这个对象始终指向当前框架的直接上层框架。在一定情况下,parent可能等于top,在没有框架的情况下,parent则一定等于top,此时它们都等于window。
最后一个与框架有关的对象是self,它始终指向window。self和window对象可以互换使用,引入self的目的只是为了与top和parent对象对应起来。
1.3 窗口位置
用来确定和修改window对象位置的属性和方法有很多。IE、Safari、Opera和Chrome都提供了screenLeft和screenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置。Firefox则在screenX和screenY属性中提供相同的窗口位置信息,Safari和Chrome同时支持这两个属性。以下代码可以跨浏览器取得窗口左边和上边的位置:
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
在使用这些值的过程中,还必须注意一些问题。IE、Opera和Chrome中,screenLeft和screenTop中保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离,但是在Firefox和Safari中,screenY或screenTop中保存的是整个浏览器窗口相对于屏幕的座标值。
moveTo()和moveBy()方法可以将窗口移到一个新位置,这两个方法都接收两个参数,moveTo()接收的是新位置的x和y座标值,而moveBy()接收的是在水平和垂直方向上移动的像素数。
1.4 窗口大小
为了确定一个窗口的大小,Firefox、Safari、Opera和Chrome提供了4个属性:innerWidth、innerHeight、outerWidth和outerHeight。在Safari和Firefox中,outerWidth和outerHeight返回浏览器窗口本身的尺寸,在Opera中,这两个属性的值表示页面视图容器(单个标签页对应的浏览器窗口)的大小。而innerWidth和innerHeight则表示该容器中页面视图区的大小(减去边框宽度)。在Chrome中,outerWidth、outerHeight与innerWidth、innerHeight返回相同的值,即视口大小而非浏览器窗口大小。IE没有提供取得当前浏览器窗口尺寸的属性。
在IE以及Firefox、Safari、Opera和Chrome中,document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息。在IE6中,这些属性必须在标准模式下才有效,如果是混杂模式,必须通过document.body.clientWidth和document.body.clientHeight取得相同信息。而对于混杂模式下的Chrome,二者都可以取得视口大小。完整的代码如下所示:
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; } }
1.5 导航
使用window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。这个方法接收4个参数:要加载的URL、窗口目标、一个特性字符串及一个表示新页面是否取代浏览器历史中当前加载页面的布尔值。通常只须传递第一个参数,最后一个参数只在不打开新窗口的情况下使用,例如:
window.open("http://www.test.com/");
第二个参数如果是已有窗口或框架的名称,那么就会在具有该名称的窗口或框架中加载指定的URL。此外,第二个参数也可以是下列任何一个特殊的窗口名称:_self、_parent、_top或_blank。
如果给window.open()传递的第二个参数并不是一个已存在的窗口或框架,那么就会根据在第三个参数位置上传入的字符串创建一个新窗口或标签页。如果没有传入第三个参数,那么就会打开一个带有全部默认设置的新浏览器窗口。在不打开新窗口的情况下,会忽略第三个参数。
window.open()方法会返回一个指向新窗口的引用。调用close方法还可以关闭新打开的窗口,例如:
var mywin = window.open("http://www.test.com/"); mywin.close();
1.6 间歇调用和超时调用
JavaScript是单线程语言,但它允许通过设置超时值和间歇值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码,后间是每隔指定时间就执行一次代码。
超时调用需要使用window对象的setTimeout()方法,它接受两个参数:要执行的代码和以毫秒表示的时间(即在执行代码前的等待时间)。第一个参数可以是一个包含JavaScript代码的字符串,也可是一个函数,例如:
setTimeout("alert('Hello World!');", 1000);
虽然传递字符串没有问题,但由于该方法可能导致性能损失,因此不建议以字符串作为第一个参数。
调用setTimeout()后,会返回一个数值ID,表示超时调用,它是计划执行代码的唯一标识,可以通过它来取消超时调用,可以通过clearTimeout()来取消,例如:
var myid = setTimeout("alert('Hello World!');", 1000); clearTimeout(myid);
间歇调用和超时调用类似,只不过它会照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval(),它接受的参数与setTimeout()相同,例如:
setInterval("alert('Hello World!');", 1000);
调用setInterval()方法同样也会返回一个间歇调用ID,该ID可用于取消间歇调用,只须使用clearInterval()方法并传入相应ID。
1.7 系统对话框
浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示消息。系统对话框外观由操作系统及浏览器设置决定。此外,通过这几个方法打开的对话框都是同步和模态的,即显示这些对话框的时候代码会停止执行,关闭对话框后代码又会恢复执行。
使用alert()方法的结果是向用户显示一个系统对话框,其中包含指定的文本和一个确定按钮,例如:
alert("Hello World!");
第二种对话框是调用confirm()方法生成的,对话框除了确定按钮外,还会显示一个取消按钮,两个按钮可以让用户决定是否执行给定的操作。可以检查confirm()方法返回的布尔值,可以检查用户是单击了哪个按钮,例如:
if (confirm("Are you sure?")) { alert("yes"); } else { alert("no"); }
最后一种对话框是通过调用prompt()方法生成的,这是一个“提示”框,用于提示用户输入一些文本。除了确定和取消按钮外,还会显示一个文本输入域,以供用户在其中输入内容。prompt()方法接受两个参数:要显示给用户的文本提示和文本输入域的默认值,例如:
var result = prompt("What is your name?", ""); if (result !== null) { alert("Welcome," + result); }
2. location对象
2.1 location属性
location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能,它即是window对象的属性,也是document对象的属性。
属性名 | 例子 | 说明 |
---|---|---|
hash | #contents | 返回URL中的hash(#号后跟零或多个字符)。 |
host | www.test.com:80 | 返回服务器名称和端口号。 |
hostname | www.test.com | 返回服务器名称。 |
href | http://www.test.com | 返回当前加载页的完整URL。 |
pathname | /Test/ | 返回URL中的目录和文件名。 |
port | 8080 | 返回URL中指定的端口号。 |
portocol | http: | 返回页面使用的协议。 |
search | ?q=javascript | 返回UR的查询字符串。 |
2.2 位置操作
使用location对象可以通过很多方式改变浏览器位置。最常用的是使用assign()方法并为其传递一个URL,例如:
location.assign("http://www.test.com/");
如果是将location.href或window.location设置为一个URL值,也会以该值调用assign()方法,例如:
window.location = "http://www.test.com"; location.href = "http://www.test.com";
另外,修改location对象的其他属性,也可以改变当前加载的页面。每次修改时,页面都会以新URL重新加载。
当通过上述任何一种方式修改URL之后,浏览器的历史记录中就会生成一条新记录,要禁用这种行为,可以使用replace()方法,这个方法只接受一个参数,即要导航到的URL,例如:
location.replace("http://www.test.com/");
与位置有关的最后一个方法是reload(),它重新加载当前显示的页面,如果不传递任何参数,则页面会以最有效的方式加载(比如从浏览器缓存),如果要强制从服务器重新加载,需要传递参数true,例如:
location.reload(true);
3. 其他对象
3.1 navigator对象
navigator对象最早由Netscape Navigator 2.0引入,现在已成为识为客户端浏览器的事实标准,每个浏览器中的navigator对象有一套自己的属性。
属性或方法 | 说明 | IE | FF | S/C | OP |
---|---|---|---|---|---|
appCodeName | 浏览器的名称,通常是Mozilla。 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
appName | 完整的浏览器名称。 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
appMinorVersion | 次版本信息 | 4.0+ | - | - | 9.5+ |
appVersion | 浏览器的版本。 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
buildID | 浏览器编译版本。 | - | 2.0+ | - | - |
cookieEnabled | 表示cookie是否启用。 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
cpuClass | 客户端计算机使用的CPU类型。 | 4.0+ | - | - | - |
javaEnabled() | 表示当前浏览器中是否启用了Java。 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
language | 浏览器的主要语言。 | - | 1.0+ | 1.0+ | 7.0+ |
mimeTypes | 在浏览器中注册的类型数组。 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
onLine | 表示浏览器是否连接到因特网。 | 4.0+ | 1.0+ | - | 9.5+ |
opsProfile | 无相关文档。 | 4.0+ | - | - | - |
oscpu | 客户端计算机的操作系统或CPU。 | - | 1.0+ | - | - |
platform | 浏览器所在的系统平台。 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
plugins | 浏览器中安装的插件信息的数组。 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
preference() | 设置用户的首选项。 | - | 1.5+ | - | - |
product | 产品名称。 | - | 1.0+ | 1.0+ | 7.0+ |
productSub | 关于产品的次要信息。 | - | 1.0+ | 1.0+ | 7.0+ |
registerContentHandler() | 针对特定类型将站点注册为处理程序。 | - | 2.0+ | - | - |
registerProtocolHandler() | 针对特定协议将站点注册为处理程序。 | - | 2.0 | - | - |
securityPolicy | 已经废弃。 | - | 1.0+ | - | - |
systemLanguage | 操作系统的语言。 | 4.0+ | - | - | - |
taintEnabled() | 已经废度。 | 4.0+ | 1.0+ | - | 7.0+ |
userAgent | 浏览器的用户代理字符串。 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
userLanguage | 操作系统的默认语言。 | 4.0+ | - | - | 7.0+ |
userProfile | 借以访问用户个人信息的对象。 | 4.0+ | - | - | - |
vendor | 浏览器的品牌。 | - | 1.0+ | 1.0+ | - |
vendorSub | 有关供应商的次要信息。 | - | 1.0+ | 1.0+ | - |
注:FF = Firefox S/C = Safari/Chrome OP = Opera
3.2 screen对象
screen对象在JavaScript中用处不大,它只用来表明客户端的能力,其中包括浏览器的显示器的信息。
属性 | 说明 | IE | FF | S/C | OP |
---|---|---|---|---|---|
availHeight | 屏幕的像素高度减系统部件高度后的值。 | 支持 | 支持 | 支持 | 支持 |
availLeft | 未被系统部件占用的最左侧的像素值。 | 支持 | 支持 | ||
availTop | 未被系统部件占用的最上方的像素值。 | 支持 | 支持 | ||
availWidth | 屏幕的像素宽度减系统部件宽度后的值。 | 支持 | 支持 | 支持 | 支持 |
bufferDepth | 读、写用于呈现屏外位图的位数。 | 支持 | |||
colorDepth | 用于表现颜色的位置。 | 支持 | 支持 | 支持 | 支持 |
deviceXDPI | 屏幕实际的水平DPI。 | 支持 | |||
deviceYDPI | 屏幕实际的垂直DPI。 | 支持 | |||
fontSmoothingEnabled | 表示是否启用了字体平滑。 | 支持 | |||
height | 屏幕的像素高度。 | 支持 | 支持 | 支持 | 支持 |
left | 当前屏幕距左边的像素距离。 | 支持 | |||
logicalXDPI | 屏幕逻辑的水平DPI。 | 支持 | |||
logicalYDPI | 屏幕逻辑的垂直DPI。 | 支持 | |||
pixelDepth | 屏幕的位深。 | 支持 | 支持 | 支持 | |
top | 当前屏幕距上边的像素距离。 | 支持 | |||
updateInterval | 读、写以毫秒表示的屏幕刷新间隔时间。 | 支持 | |||
width | 屏幕的像素宽度。 | 支持 | 支持 | 支持 | 支持 |
注:FF = firefox S/C = Safari/Chrome OP = Opera
3.3 history对象
history对象保存用户上网的历史记录,它是window对象的属性,每个浏览器窗口、标签页和框架,都有自己的history对象与特定的window对象关联。
使用go()方法可以在用户的历史记录中跳转、向前或向后。这个方法接受一个参数,表示向后或向前跳的页数。负数表示向后跳转,正数表示向前跳转,例如:
history.go(-1);
可以给go()方法传递一个字符串参数,浏览器会跳转到历史记录中包含该字符串的第一个位置,如果不包含,则什么也不做,例如:
history.go("test.com");
另外还可以使用两个简写方法back()和forward()来代替go()。除了上述几个方法,history对象还有一个length属性,保存着历史记录的数量,对于加载的第一个页面,history.length等于0。