一、window 对象
BOM 的核心对象是window,它表示浏览器的一个实例。
浏览器对象模型(BOM)以window 对象为依托,表示浏览器窗口以及页面可见区域。同时,window对象还是ECMAScript 中的Global 对象,因而所有全局变量和函数都是它的属性,且所有原生的构造函数及其他函数也都存在于它的命名空间下。
1.1 全局作用域
由于window 对象同时扮演着ECMAScript 中Global 对象的角色,因此所有在全局作用域中声明的变量、函数都会变成window 对象的属性和方法。
如:
function sayAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29
由于
sayAge()
存在于全局作用域中,因此this.age
被映射到window.age
,最终显示的仍然是正确的结果。
全局变量不能通过delete 操作符删除,而直接在window 对象上的定义的属性可以。
另外,还要记住一件事:尝试访问未声明的变量会抛出错误,但是通过查询window 对象,可以知道某个可能未声明的变量是否存在。
1.2 窗口关系及框架
如果页面中包含框架,则每个框架都拥有自己的window 对象,并且保存在frames 集合中。
如:
<head>
<title>Frameset Example</title>
</head>
<frameset rows="160,*">
<frame src="frame.htm" name="topFrame">
<frameset cols="50%,50%">
<frame src="anotherframe.htm" name="leftFrame">
<frame src="yetanotherframe.htm" name="rightFrame">
</frameset>
</frameset>
</html>
以上代码创建了一个框架集,其中一个框架居上,两个框架居下。对这个例子而言,可以通过window.frames[0]
或window.frames["topFrame"]
来引用上方的框架。不过,恐怕你最好使用top
而非window 来引用这些框架(例如,通过top.frames[0]
)。
与top 相对的另一个window 对象是
parent
。顾名思义,parent(父)对象始终指向当前框架的直接上层框架。
注意,除非最高层窗口是通过
window.open()
打开的,否则其window 对象的name
属性不会包含任何值。
1.3 窗口位置
用来确定和修改window 对象位置的属性和方法有很多。IE、Safari、Opera 和Chrome 都提供了screenLeft
和screenTop
属性,分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX
和screenY
属性中提供相同的窗口位置信息,Safari 和Chrome 也同时支持这两个属性。
无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。然而,使用moveTo()
和moveBy()
方法倒是有可能将窗口精确地移动到一个新位置。
这两个方法都接收两个参数
1.moveTo()
接收的是新位置的x 和y 坐标值;
2.moveBy()
接收的是在水平和垂直方向上移动的像素数。
如:
window.moveTo(0,0);
//将窗向下移动100 像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
//将窗口向左移动50 像素
window.moveBy(-50,0);
1.4 窗口大小
跨浏览器确定一个窗口的大小不是一件简单的事。IE9+、Firefox、Safari、Opera 和Chrome 均为此提供了4 个属性:innerWidth
、innerHeight
、outerWidth
和outerHeight
。
在IE、Firefox、Safari、Opera 和Chrome 中,document.documentElement.clientWidth
和document.documentElement.clientHeight
中保存了页面视口的信息。
对于移动设备,window.innerWidth
和window.innerHeight
保存着可见视口,也就是屏幕上可见页面区域的大小。移动IE 浏览器不支持这些属性,但通过document.documentElement.client- Width
和document.documentElement.clientHeihgt
提供了相同的信息。随着页面的缩放,这些值也会相应变化。
另外,使用resizeTo()
和resizeBy()
方法可以调整浏览器窗口的大小。
1.resizeTo()
接收浏览器窗口的新宽度和新高度;
2.resizeBy()
接收新窗口与原窗口的宽度和高度之差
如:
window.resizeTo(100, 100);
//调整到200×150
window.resizeBy(100, 50);
//调整到 300×300
window.resizeTo(300, 300);
需要注意的是,这两个方法与移动窗口位置的方法类似,也有可能被浏览器禁用;而且,在Opera和IE7(及更高版本)中默认就是禁用的。另外,这两个方法同样不适用于框架,而只能对最外层的window 对象使用。
1.5 导航和打开窗口
使用window.open()
方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。这个方法可以接收4 个参数:要加载的URL
、窗口目标
、一个特性字符串
以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值
。通常只须传递第一个参数,最后一个参数只在不打开新窗口的情况下使用。
如果为window.open()
传递了第二个参数,而且该参数是已有窗口或框架的名称,那么就会在具有该名称的窗口或框架中加载第一个参数指定的URL。
此外,第二个参数也可以是下列任何一个特殊的窗口名称:_self
、_parent
、_top
或_blank
。
1.5.1 弹出窗口
如果给window.open()
传递的第二个参数并不是一个已经存在的窗口或框架,那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。
在不打开新窗口的情况下,会忽略第三个参数。第三个参数是一个逗号分隔的设置字符串,表示在新窗口中都显示哪些特性。下表列出了可以出现在这个字符串中的设置选项。
设 置 | 值 | 说 明 |
---|---|---|
fullscreen | yes或no | 表示浏览器窗口是否最大化。仅限IE |
height | 数值 | 表示新窗口的高度。不能小于100 |
left | 数值 | 表示新窗口的左坐标。不能是负值 |
location | yes或no | 表示是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。如果设置为no,地址栏可能会隐藏,也可能会被禁用(取决于浏览器) |
menubar | yes或no | 表示是否在浏览器窗口中显示菜单栏。默认值为no |
resizable | yes或no | 表示是否可以通过拖动浏览器窗口的边框改变其大小。默认值为no |
scrollbars | yes或no | 表示如果内容在视口中显示不下,是否允许滚动。默认值为no |
status | yes或no | 表示是否在浏览器窗口中显示状态栏。默认值为no |
toolbar | yes或no | 表示是否在浏览器窗口中显示工具栏。默认值为no |
top | 数值 | 表示新窗口的上坐标。不能是负值 |
width | 数值 | 表示新窗口的宽度。不能小于100 |
表中所列的部分或全部设置选项,都可以通过逗号分隔的名值对列表来指定。其中,名值对以等号表示(注意,整个特性字符串中不允许出现空格),如下面的例子所示。
window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
var wroxWin = window.open("http://www.wrox.com/","wroxWindow",
"height=400,width=400,top=10,left=10,resizable=yes");
//调整大小
wroxWin.resizeTo(500,500);
//移动位置
wroxWin.moveTo(100,100);
调用close()方法还可以关闭新打开的窗口。
wroxWin.close();
但是,这个方法仅适用于通过
window.open()
打开的弹出窗口。不过,弹出窗口倒是可以调用top.close()在不经用户允许的情况下关闭自己.
新创建的window 对象有一个opener
属性,其中保存着打开它的原始窗口对象。将opener 属性设置为null 就是告诉浏览器新创建的标签页不需要与打开它的标签页通信,因此可以在独立的进程中运行。标签页之间的联系一旦切断,将没有办法恢复。
1.5.2 安全限制
曾经有一段时间,广告商在网上使用弹出窗口达到了肆无忌惮的程度。他们经常把弹出窗口打扮成系统对话框的模样,引诱用户去点击其中的广告。由于看起来像是系统对话框,一般用户很难分辨是真是假。为了解决这个问题,有些浏览器开始在弹出窗口配置方面增加限制。
此外,有的浏览器只根据用户操作来创建弹出窗口。这样一来,在页面尚未加载完成时调用window.open()
的语句根本不会执行,而且还可能会将错误消息显示给用户。换句话说,只能通过单击或者击键来打开弹出窗口。
1.5.2 弹出窗口屏蔽程序
大多数浏览器都内置有弹出窗口屏蔽程序,而没有内置此类程序的浏览器,也可以安装Yahoo!Toolbar 等带有内置屏蔽程序的实用工具。
如果是浏览器内置的屏蔽程序阻止的弹出窗口,那么window.open()
很可能会返回null
。此时,只要检测这个返回的值就可以确定弹出窗口是否被屏蔽了。
如果是浏览器扩展或其他程序阻止的弹出窗口,那么window.open()通常会抛出一个错误。
1.6 间歇调用和超时调用
JavaScript 是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。
前者是在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码。
超时调用需要使用window 对象的setTimeout()
方法,它接受两个参数:要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫秒).
其中,第一个参数可以是一个包含JavaScript 代码的字符串(就和在eval()
函数中使用的字符串一样),也可以是一个函数。
如:
//不建议传递字符串!
setTimeout("alert('Hello world!') ", 1000);
//推荐的调用方式
setTimeout(function() {
alert("Hello world!");
}, 1000);
第二个参数是一个表示等待多长时间的毫秒数,但经过该时间后指定的代码不一定会执行。
setTimeout()
的第二个参数告诉JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的,那么添加的代码会立即执行;如果队列不是空的,那么它就要等前面的代码执行完了以后再执行。
要取消尚未执行的超时调用计划,可以调用clearTimeout()
方法并将相应的超时调用ID 作为参数传递给它。
//设置超时调用
var timeoutId = setTimeout(function() {
alert("Hello world!");
}, 1000);
//注意:把它取消
clearTimeout(timeoutId);
只要是在指定的时间尚未过去之前调用clearTimeout(),就可以完全取消超时调用。
间歇调用与超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()
,它接受的参数与setTimeout()
相同:
调用
setInterval()
方法同样也会返回一个间歇调用ID,该ID 可用于在将来某个时刻取消间歇调用。要取消尚未执行的间歇调用,可以使用clearInterval()
方法并传入相应的间歇调用ID。取消间歇调用的重要性要远远高于取消超时调用,因为在不加干涉的情况下,间歇调用将会一直执行到页面卸载。
常见例子如:
var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
num++;
//如果执行次数达到了max 设定的值,则取消后续尚未执行的调用
if (num == max) {
clearInterval(intervalId);
alert("Done");
}
}
intervalId = setInterval(incrementNumber, 500);
这个模式也可以使用超时调用来实现,如下所示:
var num = 0;
var max = 10;
function incrementNumber() {
num++;
//如果执行次数未达到max 设定的值,则设置另一次超时调用
if (num < max) {
setTimeout(incrementNumber, 500);
} else {
alert("Done");
}
}
setTimeout(incrementNumber, 500);
一般认为,使用超时调用来模拟间歇调用的是一种最佳模式。
1.7 系统对话框
浏览器通过alert()
、confirm()
和prompt()
方法可以调用系统对话框向用户显示消息。
显示这些对话框的时候代码会停止执行,而关掉这些对话框后代码又会恢复执行。
通常使用
alert()
生成的“警告”对话框向用户显示一些他们无法控制的消息,例如错误消息。而用户只能在看完消息后关闭对话框。
第二种对话框是调用confirm()
方法生成的。,这种“确认”对话框很像是一个“警告”对话框。但二者的主要区别在于“确认”对话框除了显示OK 按钮外,还会显示一个Cancel(“取消”)按钮。
为了确定用户是单击了OK 还是Cancel,可以检查
confirm()
方法返回的布尔值:true 表示单击了OK,false 表示单击了Cancel 或单击了右上角的X 按钮。
如:
if (confirm("Are you sure?")) {
alert("I'm so glad you're sure! ");
} else {
alert("I'm sorry to hear you're not sure. ");
}
最后一种对话框是通过调用prompt()
方法生成的,这是一个“提示”框,用于提示用户输入一些文本。提示框中除了显示OK 和Cancel 按钮之外,还会显示一个文本输入域,以供用户在其中输入内容。
prompt()
方法接受两个参数:要显示给用户的文本提示和文本输入域的默认值(可以是一个空字符串)。
如果用户单击了OK 按钮,则prompt()
返回文本输入域的值;如果用户单击了Cancel 或没有单击OK 而是通过其他方式关闭了对话框,则该方法返回null。
如:
var result = prompt("What is your name? ", "");
if (result !== null) {
alert("Welcome, " + result);
}
除了上述三种对话框之外,Google Chrome 浏览器还引入了一种新特性。如果当前脚本在执行过程中会打开两个或多个对话框,那么从第二个对话框开始,每个对话框中都会显示一个复选框,以便用户阻止后续的对话框显示。
如果用户勾选了其中的复选框,并且关闭了对话框,那么除非用户刷新页面,所有后续的系统对话
框(包括警告框、确认框和提示框)都会被屏蔽
还有两个可以通过JavaScript 打开的对话框,即“查找”和“打印”。这两个对话框与用户通过浏览器菜单的“查找”和“打印”命令打开的对话框相同。在JavaScript 中则可以像下面这样通过window 对象的find()和print()方法打开它们。
//显示“打印”对话框
window.print();
//显示“查找”对话框
window.find();
二、location对象
location 是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。location 对象是很特别的一个对象,因为它既是window 对象的属性,也是document 对象的属性;换句话说,window.location
和document.location
引用的是同一个对象。
location 对象的用处不只表现在它保存着当前文档的信息,还表现在它将URL 解析为独立的片段,让开发人员可以通过不同的属性访问这些片段。
下表列出了location 对象的所有属性(注:省略了每个属性前面的location 前缀)。
属性名 | 例子 | 说明 |
---|---|---|
hash | “#contents” | 返回URL中的hash(#号后跟零或多个字符),如果URL中不包含散列,则返回空字符串 |
host | “www.wrox.com:80” | 返回服务器名称和端口号(如果有) |
hostname | “www.wrox.com” | 返回不带端口号的服务器名称 |
href | “http:/www.wrox.com” | 返回当前加载页面的完整URL。而location对象的toString() 方法也返回这个值 |
pathname | “/WileyCDA/” | 返回URL中的目录和(或)文件名 |
port | “8080” | 返回URL中指定的端口号。如果URL中不包含端口号,则这个属性返回空字符串 |
protocol | “http:” | 返回页面使用的协议。通常是http:或https: |
search | “?q=javascript” | 返回URL的查询字符串。这个字符串以问号开头 |
2.1 查询字符串参数(略)
2.2 位置操作
使用location 对象可以通过很多方式来改变浏览器的位置,首先,也是最常用的方式,就是使用assign()
方法并为其传递一个URL,如下所示。
location.assign("http://www.wrox.com");
如果是将location.href
或window.location
设置为一个URL 值,也会以该值调用assign()
方法。例如,下列两行代码与显式调用assign()
方法的效果完全一样。
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";
在这些改变浏览器位置的方法中,最常用的是设置 location.href
属性。
另外,修改location 对象的其他属性也可以改变当前加载的页面。下面的例子展示了通过将hash
、search
、hostname
、pathname
和port
属性设置为新值来改变URL。
//假设初始URL 为http://www.wrox.com/WileyCDA/
//将URL 修改为"http://www.wrox.com/WileyCDA/#section1"
location.hash = "#section1";
//将URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"
location.search = "?q=javascript";
//将URL 修改为"http://www.yahoo.com/WileyCDA/"
location.hostname = "www.yahoo.com";
//将URL 修改为"http://www.yahoo.com/mydir/"
location.pathname = "mydir";
//将URL 修改为"http://www.yahoo.com:8080/WileyCDA/"
location.port = 8080;
每次修改location 的属性
当通过上述任何一种方式修改URL 之后,浏览器的历史记录中就会生成一条新记录,因此用户通过单击“后退”按钮都会导航到前一个页面。
要禁用这种行为,可以使用
replace()
方法,这个方法只接受一个参数,即要导航到的URL;结果虽然会导致浏览器位置改变,但不会在历史记录中生成新记录。
在调用replace()方法之后,用户不能回到前一个页面。
与位置有关的最后一个方法是reload()
,作用是重新加载当前显示的页面。如果调用reload()
时不传递任何参数,页面就会以最有效的方式重新加载。
如果要强制从服务器重新加载,则需要像下面这样为该方法传递参数true。
location.reload(); //重新加载(有可能从缓存中加载)
location.reload(true); //重新加载(从服务器重新加载)
三、navigator对象
最早由Netscape Navigator 2.0 引入的navigator 对象,现在已经成为识别客户端浏览器的事实标准。navigator 对象是所有支持JavaScript 的浏览器所共有的。与其他BOM 对象的情况一样,每个浏览器中的navigator 对象也都有一套自己的属性。下表列出了存在于所有浏览器中的属性和方法,以及支持它们的浏览器版本。
属性或方法 | 说明 | IE | Firefox | Safari/Chrome | Opera |
---|---|---|---|---|---|
appCodeName | 浏览器的名称。通常都是Mozilla,即使在非Mozilla浏览器中也是如此 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
appMinorVersion | 次版本信息 | 4.0+ | - | - | 9.5+ |
appName | 完整的浏览器名称 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
appVersion | 浏览器的版本。一般不与实际的浏览器版本对应 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
buildID | 浏览器编译版本 | - | 2.0+ | - | - |
cookieEnabled | 表示cookie是否启用 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
cpuClass | 客户端计算机中使用的CPU类型(x86、68K、Alpha、PPC或Other) | 4.0+ | - | - | - |
javaEnabled() | 表示当前浏览器中是否启用了Java | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
language | 浏览器的主语言 | - | 1.0+ | 1.0+ | 7.0+ |
mimeTypes | 在浏览器中注册的MIME类型数组 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
onLine | 表示浏览器是否连接到了因特网 | 4.0+ | 1.0+ | - | 9.5+ |
似乎早就不用了。查不到相关文档 | 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 | 产品名称(如 Gecko) | - | 1.0+ | 1.0+ | - |
productSub | 关于产品的次要信息 (如Gecko的版本) | - | 1.0+ | 1.0+ | - |
register-ContentHandler() | 针对特定的MIME类型将一个站点注册为处理程序 | - | 2.0+ | - | - |
register-ProtocolHandler() | 针对特定的协议将一个站点注册为处理程序 | - | 2.0 | - | - |
已经废弃。安全策略的名称。为了与Netscape Navigator 4向后兼容而保留下来 | - | 1.0+ | - | - | |
systemLanguage | 操作系统的语言 | 4.0+ | - | - | - |
已经废弃。表示是否允许变量被修改(taint)。为了与Netscape Navigator 3向后兼容而保留下来 | 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+ | - |
表中的这些navigator 对象的属性通常用于检测显示网页的浏览器类型(接下来更新的内容中会进行详细解释)。
3.1 检测插件
检测浏览器中是否安装了特定的插件是一种最常见的检测例程。对于非IE 浏览器,可以使用plugins
数组来达到这个目的。该数组中的每一项都包含下列属性。
name:插件的名字。
description:插件的描述。
filename:插件的文件名。
length:插件所处理的MIME 类型数量。
一般来说,name 属性中会包含检测插件必需的所有信息,但有时候也不完全如此。
在检测插件时,需要像下面这样循环迭代每个插件并将插件的name
与给定的名字进行比较。
//检测插件(在IE 中无效)
function hasPlugin(name){
name = name.toLowerCase();
for (var i=0; i < navigator.plugins.length; i++){
if (navigator. plugins [i].name.toLowerCase().indexOf(name) > -1){
return true;
}
}
return false;
}
//检测Flash
alert(hasPlugin("Flash"));
//检测QuickTime
alert(hasPlugin("QuickTime"));
这个
hasPlugin()
函数接受一个参数:要检测的插件名。第一步是将传入的名称转换为小写形式,以便于比较。然后,迭代plugins 数组,通过indexOf()
检测每个name
属性,以确定传入的名称是否出现在字符串的某个地方。比较的字符串都使用小写形式可以避免因大小写不一致导致的错误。而传入的参数应该尽可能具体,以避免混淆。应该说,像Flash 和QuickTime 这样的字符串就比较具体了,不容易导致混淆。在Firefox、Safari、Opera 和Chrome 中可以使用这种方法来检测插件。
检测IE 中的插件比较麻烦,因为IE 不支持Netscape 式的插件。在IE 中检测插件的唯一方式就是使用专有的ActiveXObject
类型,并尝试创建一个特定插件的实例。IE 是以COM对象的方式实现插件的,而COM对象使用唯一标识符来标识。因此,要想检查特定的插件,就必须知道其COM标识符。
例如,Flash 的标识符是ShockwaveFlash.ShockwaveFlash
。知道唯一标识符之后,就可以编写类似下面的函数来检测IE 中是否安装相应插件了。
//检测IE 中的插件
function hasIEPlugin(name){
try {
new ActiveXObject(name);
return true;
} catch (ex){
return false;
}
}
//检测Flash
alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));
//检测QuickTime
alert(hasIEPlugin("QuickTime.QuickTime"));
在这个例子中,函数
hasIEPlugin()
只接收一个COM 标识符作为参数。在函数内部,首先会尝试创建一个COM 对象的实例。之所以要在try-catch
语句中进行实例化,是因为创建未知COM 对象会导致抛出错误。这样,如果实例化成功,则函数返回true;否则,如果抛出了错误,则执行catch块,结果就会返回false。例子最后检测IE 中是否安装了Flash 和QuickTime 插件。
鉴于检测这两种插件的方法差别太大,因此典型的做法是针对每个插件分别创建检测函数,而不是使用前面介绍的通用检测方法。如下:
//检测所有浏览器中的Flash
function hasFlash(){
var result = hasPlugin("Flash");
if (!result){
result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
}
return result;
}
//检测所有浏览器中的QuickTime
function hasQuickTime(){
var result = hasPlugin("QuickTime");
if (!result){
result = hasIEPlugin("QuickTime.QuickTime");
}
return result;
}
//检测Flash
alert(hasFlash());
//检测QuickTime
alert(hasQuickTime());
}
上面代码中定义了两个函数:
hasFlash()
和hasQuickTime()
。每个函数都是先尝试使用不针对IE 的插件检测方法。如果返回了false(在IE 中会这样),那么再使用针对IE 的插件检测方法。如果IE 的插件检测方法再返回false,则整个方法也将返回false。只要任何一次检测返回true,整个方法都会返回true。
3.2 注册处理程序
Firefox 为navigator 对象新增了registerContentHandler()
和registerProtocolHandler()
方法。这两个方法可以让一个站点指明它可以处理特定类型的信息。
其中,registerContentHandler()方法接收三个参数:要处理的MIME 类型、可以处理该MIME类型的页面的URL 以及应用程序的名称。
举个例子,要将一个站点注册为处理RSS 源的处理程序,可以使用如下代码。
navigator.registerContentHandler("application/rss+xml",
"http://www.somereader.com?feed=%s", "Some Reader");
第一个参数是RSS 源的MIME 类型。第二个参数是应该接收RSS 源URL 的URL,其中的%s
表示RSS 源URL,由浏览器自动插入。当下一次请求RSS 源时,浏览器就会打开指定的URL,而相应的Web 应用程序将以适当方式来处理该请求。
类似的调用方式也适用于
registerProtocolHandler()
方法,它也接收三个参数:要处理的协议(例如,mailto 或ftp)、处理该协议的页面的URL 和应用程序的名称
例如,要想将一个应用程序注册为默认的邮件客户端,可以使用如下代码。
navigator.registerProtocolHandler("mailto",
"http://www.somemailclient.com?cmd=%s", "Some Mail Client");
这个例子注册了一个mailto 协议的处理程序,该程序指向一个基于Web 的电子邮件客户端。同样,第二个参数仍然是处理相应请求的URL,而
%s
则表示原始的请求。
四、screen对象
JavaScript 中有几个对象在编程中用处不大,而screen 对象就是其中之一。screen 对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。
下表列出了所有属性及支持相应属性的浏览器。
属性 | 说明 | IE | Firefox | Safari/Chrome | Opera |
---|---|---|---|---|---|
availHeight | 屏幕的像素高度减系统部件高度之后的值(只读) | √ | √ | √ | √ |
availLeft | 未被系统部件占用的最左侧的像素值(只读) | √ | √ | ||
availTop | 未被系统部件占用的最上方的像素值(只读) | √ | √ | ||
availWidth | 屏幕的像素宽度减系统部件宽度之后的值(只读) | √ | √ | √ | √ |
bufferDepth | 读、写用于呈现屏外位图的位数 | √ | |||
colorDepth | 用于表现颜色的位数;多数系统都是32(只读) | √ | √ | √ | √ |
deviceXDPI | 屏幕实际的水平DPI(只读) | √ | |||
deviceYDPI | 屏幕实际的垂直DPI(只读) | √ | |||
fontSmoothingEnabled | 表示是否启用了字体平滑(只读) | √ | |||
height | 屏幕的像素高度 | √ | √ | √ | √ |
left | 当前屏幕距左边的像素距离 | √ | |||
logicalXDPI | 屏幕逻辑的水平DPI(只读) | √ | |||
logicalYDPI | 屏幕逻辑的垂直DPI(只读) | √ | |||
pixelDepth | 屏幕的位深(只读) | √ | √ | √ | |
top | 当前屏幕距上边的像素距离 | √ | |||
updateInterval | 读、写以毫秒表示的屏幕刷新时间间隔 | √ | |||
width | 屏幕的像素宽度 | √ | √ | √ | √ |
五、history对象
history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。因为history 是window对象的属性,因此每个浏览器窗口、每个标签页乃至每个框架,都有自己的history 对象与特定的window 对象关联。
使用go()
方法可以在用户的历史记录中任意跳转,可以向后也可以向前。这个方法接受一个参数,表示向后或向前跳转的页面数的一个整数值。
负数表示向后跳转(类似于单击浏览器的“后退”按钮),正数表示向前跳转(类似于单击浏览器的“前进”按钮)。
如:
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
另外,还可以使用两个简写方法
back()
和forward()
来代替go()
。顾名思义,这两个方法可以模仿浏览器的“后退”和“前进”按钮。
如:
//后退一页
history.back();
//前进一页
history.forward();
除了上述几个方法外,history
对象还有一个length
属性,保存着历史记录的数量。这个数量包括所有历史记录,即所有向后和向前的记录。对于加载到窗口、标签页或框架中的第一个页面而言,history.length
等于0。通过像下面这样测试该属性的值,可以确定用户是否一开始就打开了你的页面。
if (history.length == 0){
//这应该是用户打开窗口后的第一个页面
}