14、BOM

junJZ_2008

浏览: 1344470 次
性别:
来自: 湖南澧縣

最近访客更多访客>>

fushangan

xiaoyuer9953

qq234766237

coollyj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

浏览器框架 IE 脚本 JavaScript

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 onkeydown="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="关闭" onclick="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() 返回带有指定标签名的对象集合。

分享到：

15、DOM&HTML DOM(一) | 13、JavaScript继承实现(二) —— zInheri ...

2009-09-22 06:12
浏览 1527
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

14、BOM

window 对象

screenLeft 、 screenTop 、 screenX、 screenY

window.open方法

window.showModalDialog 与 showModelessDialog方法

窗口特征（Window Features）

时间间隔和暂停（ setTimeout、 setInterval ）

screen

location

History 对象

document对象

Document 常用对象的集合

Document 对象的属性

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

14、BOM

window 对象

screenLeft 、 screenTop 、 screenX、 screenY

window.open方法

window.showModalDialog 与 showModelessDialog方法

窗口特征（Window Features）

时间间隔和暂停（ setTimeout、 setInterval ）

screen

location

History 对象

document对象

Document 常用对象的集合

Document 对象的属性

评论

发表评论

相关推荐

HTML、JS、JSON特殊字符

HTML — HTTP URL 中的特殊字符

HTML — CSS选择器

部分解决JsUnit无法在firefox3、safari 测试的问题

JsUnit——eclipse插件（四）

10、JavaScript跨浏览器需注意的问题——ajax基础笔记

JsUnit详解——Web服务方式（三）

JsUnit详解——《ajax基础》笔记（二）

JsUnit详解——《ajax基础》笔记（一）

使用Firefox的Web开发插件

9、访问WEB服务(REST)——ajax基础笔记

8、读取响应头部——ajax基础笔记

7、使用JSON向服务器发送数据——ajax基础笔记

6、请求参数作为XML发送——ajax基础笔记

4、将使用W3C DOM动态生成页面——ajax基础笔记

3、将响应解析为XML——ajax基础笔记

2、使用innerHTML属性创建动态内容——ajax基础笔记

1、使用XMLHttpRequest对象——ajax基础笔记

30、JavaScript代码优化

JavaScript代码优化（二）

最近访客更多访客>>