BOM (浏览器对象模型),它提供了独立于内容而与浏览器窗口进行交互的对象。
BOM 由一系列相关的对象构成。下图展示了 基本的 BOM 体系结构:
可以看到, window 对象是整个 BOM 的核心。
-
window 对象
window 对象表示整个浏览器窗口,但不必表示其中包含的内容。
如果页面使用框架集合,每个框架都有它自己的 window 对象表示,并存放在父window的 frames 集合中。
top 对象指向的都是最顶层的(最外层的)框架,即浏览器窗口自身。
可以用 window.frames[0] 或 window.frames["topFrame"] 引用子框架,也可以用 top 对象代替 window 对象引用这些框架(例如 top.frames[0] )。
window 另一个实例是 parent,表示某窗口的父窗口,即由谁打开的子窗口。
如果代码写在 topFrame 中, parent 对象就指向 top 对象,因为浏览器窗口自身被看作所有顶层框架的父框架。
最顶层窗口的top、parent对象就是window对象,也与self相同。
window 对象的 name 属性,它存储的是框架的名字,如果不是在某个框架集里的窗口,一般是没有名字的。
如果页面上没有框架, window 和 self 就等于 top , frames 集合的长度为 0 。
opener为创建该窗口的 Window 对象的引用,即父窗口。
screenLeft 、 screenTop 、 screenX、 screenY
IE 提供了 window.screenLeft 和 window.screenTop 对象来判断窗口的位置,但未提供任何判断窗口大小的方法。用 document.body.offsetWidth 和 document.body.offsetHeight 属性可以获取视口的大小(显示 HTML 页的区域),但它们不是标准属性。
Mozilla 提供 window.screenX 和 window.screenY 属性判断窗口的位置。它还提供了 window.innerWidth 和 window.innerHeight 属性来判断视口的大小, window.outerWidth 和 window.outerHeight 属性判断浏览器窗口自身的大小。
Opera 和 Safari 提供与 Mozilla 相同的属性设置。
window.open方法
oNewWindow = window .open( [ sURL ] [ , sName ] [ , sFeatures ] [ , bReplace ] )
参数 | 描述 |
URL | 一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。 |
name | 一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。专用的框架名_self 、 _parent 、 _top 和 _blank 也是有效的。 |
features | 一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。在窗口特征这个表格中,我们对该字符串的格式进行了详细的说明。 |
replace | 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值: true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。 |
window.showModalDialog 与 showModelessDialog方法
语法:
vReturnValue = window .showModalDialog( sURL [ , vArguments ] [ , sFeatures ] )
vReturnValue = window .showModelessDialog( sURL [ , vArguments ] [ , sFeatures ] )
区别:
showModalDialog:弹出的为模式窗口,何为模式窗口?就是弹出来的窗口只有在关闭后才能操作父窗口,像alert()。
showModelessDialog:弹出的窗口为非模式窗口。
点击弹出的窗口中的超链接会弹出另外窗口,如果不想弹出的话:
在被打开的网页(即超链所指向的页面)里加上<base target="_self">就可以了。这句话一般是放在<html>和<body>之间的。
因为这两个弹出的窗口中是不能刷新的,如果要实现刷新页面,只能通过以下脚本:
<body οnkeydοwn="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reload...</a>
将filename.htm替换成弹出窗口页面文件并脚本放到页面里,按F5就可以刷新了,注意,这个要配合<base target="_self">使用,不然你按下F5会弹出新窗口的
用脚本关闭窗口
<input type="button" value="关闭" οnclick="window.close()">
代码放到弹出的页面里,但也要配合<base target="_self">,不然会打开一个新的IE窗口,然后再关掉的。
父窗口与弹出窗口数据的传递:
在父窗口中传递脚本:
var oParam = {};
oParam.param1 = 'param1';//参数1
oParam.param2 = 'param2';//参数2
oParam.returnValue = undefined;//定义返回值
window.showModalDialog('b.html',oParam);
alert(oParam.returnValue);//returnValue
在弹出窗口中读取与返回:
alert(window.dialogArguments.param1 + ' ' + window.dialogArguments.param2);//param1 param2
window.dialogArguments.returnValue = 'returnValue';
注意:上面如果父窗口要接收弹出窗口的返回值时,只能用模式窗口,因为如果是非模式窗口时,则返回弹出窗口的引用。
在弹出窗口中也可用window.returnValue来设置返回值,这样关闭模式窗口后也可获得返回值。
窗口特征(Window Features)
channelmode=yes|no|1|0 | 是否使用剧院模式显示窗口。默认为 no。 |
directories=yes|no|1|0 | 是否添加目录按钮。默认为 yes。 |
fullscreen=yes|no|1|0 | 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。 |
height=pixels | 窗口文档显示区的高度。以像素计。 |
left=pixels | 窗口的 x 坐标。以像素计。 |
location=yes|no|1|0 | 是否显示地址字段。默认是 yes。 |
menubar=yes|no|1|0 | 是否显示菜单栏。默认是 yes。 |
resizable=yes|no|1|0 | 窗口是否可调节尺寸。默认是 yes。 |
scrollbars=yes|no|1|0 | 是否显示滚动条。默认是 yes。 |
status=yes|no|1|0 | 是否添加状态栏。默认是 yes。 |
titlebar=yes|no|1|0 | 是否显示标题栏。默认是 yes。 |
toolbar=yes|no|1|0 | 是否显示浏览器的工具栏。默认是 yes。 |
top=pixels | 窗口的 y 坐标。 |
width=pixels | 窗口的文档显示区的宽度。以像素计 |
时间间隔和暂停( setTimeout、 setInterval )
Java 开发者熟悉对象的 wait() 方法,可使程序暂停,在继续执行下一行代码前,等待指定的时间量。这种功能非常有用,遗憾地是, JavaScript 未提供相应的支持。但这种功能并非完全不能实现,有几种方法可以采用。
JavaScript 支持暂停和时间间隔,这可有效地告诉浏览器应该何时执行某行代码。所谓暂停 ,是在指定的毫秒数后执行指定的代码。时间间隔是反复执行指定的代码,每次执行之间等待指定的毫秒数。
可以用 window 对象的 setTimeout() 方法设置暂停 。该方法接受两个参数,要执行的代码和在执行它之前要等待的毫秒数( 1/1000 秒)。第一个参数可以是代码串(与 eval() 函数的参数相同),也可是函数指针。例如,下面的代码都在 1 秒钟后显示一条警告:
当然,还可以引用以前定义的函数:
调用 setTimeout() 时,它创建一个数字暂停 ID ,与操作系统中的进程 ID 相似。暂停 ID 本质上是要延迟的进程的 ID ,在调用 setTimeout() 后,就不应该再执行它的代码。要取消还未执行的暂停,可调用 clearTimeout() 方法,并将暂停 ID 传递给它:
你也许会问:“为什么要定义暂停,又在执行它之前将其取消呢 ? ”请考虑现在大多数应用程序中可见的工具提示。当把鼠标移动到一个按钮上时,停留一会,等待出现黄色的文本框,提示该按钮的功能。如果只是短暂地把鼠标移到该按钮上,然后很快将其移到另一个按钮上,那么第一个按钮的工具提示就不会显示。这就是要在执行暂停代码前取消它的原因。因为你在执行代码前只想等待指定的时间量。如果用户的操作产生了不同的结果,则需要取消该暂停。
时间间隔 与暂停的运行方式相似,只是它无限次地每隔指定的时间段就重复一次指定的代码。可调用 setInterval() 方法设置时间间隔 ,它的参数与 setTimeout() 相同,是要执行的代码和每次执行之间等待的毫秒数。例如:
此外,与 setTimeout() 类似, setInterval() 方法也创建时间间隔 ID ,以标识要执行的代码。 ClearInterval() 方法可用这个 ID 阻止再次执行该代码。显然,这一点在使用时间间隔时更重要,因为如果不取消时间间隔,就会一直执行它,直到页面被卸载为止。下面是时间间隔用法的一个常见示例:
在这段代码中,每隔 500 毫秒,就对数字 iNum 进行一次增量运算,直到它达到最大值( iMax ),此时该时间间隔将被清除。也可用暂停实现该操作,这样即不必跟踪时间间隔的 ID ,代码如下:
这段代码使用链接暂停,即 setTimeout() 执行的代码也调用了 setTimeout() 。如果在执行过增量运算后, iNum 不等于 iMax ,就调用 setTimeout() 方法。不必跟踪暂停 ID ,也不必清除它,因为代码执行后,将销毁暂停 ID 。
那么应该使用哪种方法呢?这由使用情况决定。在执行一组指定的代码前等待一段时间,则使用暂停。如果要反复执行某些代码,就使用时间间隔。
-
screen
availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
height 返回显示屏幕的高度。
width 返回显示器屏幕的宽度。
-
location
reload() 重新加载当前文档。
href 设置或返回完整的 URL。
-
History 对象
length 返回浏览器历史列表中的 URL 数量
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面
go() 方法只有一个参数,即前进或后退的页面数。如果是负数,就在浏览器历史中后退。如果是正数,就前进(这种差别就像 Back 和 Forward 按钮之间的差别)。
因此,后退一页,可用下面的代码:
当然, window 对象的引用不是必需的,也可使用下面的代码:
通常用该方法创建网页中嵌入的 Back 按钮,例如:
要前进一页,只需要使用正数 1 :
另外,用 back() 和 forward() 方法可以实现同样的操作:
这些代码更有意义一些,因为它们精确地反应出浏览器的 Back 和 Forward 按钮的行为。
虽然不能使用浏览器历史中的 URL ,但可以用 length 属性查看历史中的页面数:
如果想前进或后退多个页面,想知道是否可以这样做,那么上面的代码就非常有用。
-
document对象
这个对象的独特之处是它是唯一一个既属于 BOM 又属于 DOM 。
从 BOM 角度看, document 对象由一系列集合构成,这些集合可以访问文档的各个部分,并提供页面自身的信息。再有,由于 BOM 没有可以指导实现的标准,所以每个浏览器实现的 document 对象都稍有不同。
Document 常用对象的集合
all[]
提供对文档中所有 HTML 元素的访问。
document.all[i]
document.all[name]
document.all.tags[tagname]
all[] 已经被 Document 接口的标准的 getElementByid() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。
如果多个元素拥有指定的 name,将得到共享同一名称的元素的一个数组。
forms[]
返回对文档中所有 Form 对象引用。
images[] 返回对文档中所有 Image 对象引用。
links[] 返回对文档中所有 Area 和 Link 对象引用。
Document 对象的属性
body 提供对 <body> 元素的直接访问。对于定义了框架集的文档,该属性引用最外层的 <frameset>。
cookie 设置或返回与当前文档有关的所有 cookie。
title 返回当前文档的标题。
URL
返回当前文档的 URL。
一般情况下,该属性的值与包含文档的 Window 的 location.href 属性相同。不过,在 URL 重定向发生的时候,这个 URL 属性保存了文档的实际 URL,而 location.href 保存了请求的 URL。
Document 对象的方法
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。