您的位置：首页 > 其它

浏览器对象模型BOM

2013-03-28 11:48 232 查看

BOM_浏览器对象模型

浏览器本身就是一个对象，也是一个对象容器，其又包含了很多功能独立的对象。通过浏览器支持的脚本语言可以自由操纵这些对象。

基本的BOM体系结构：

window

document

anchors

forms

images

links

location

frames

history

location

navigator

screen

1 window对象

window对象是浏览器对象中的默认对象。所以可以隐式地引用window对象的属性和方法。window对象表示浏览器中打开的窗口，提供关于窗口状态的信息。可以用window对象访问窗口中绘制的文档、窗口中发生的事件和影响窗口的浏览器特性。

浏览器在打开HTML文档时生成window对象。如果文档定义一组帧，则浏览器对原文档生成一个window对象，并对每个帧生成window对象。这些对象是原父窗口的子窗口。父窗口中的动作会影响子窗口：例如，如果关闭父窗口，则子窗口也关闭。也可以通过用showModalDialog方法，生成新窗口，从而生成新的window对象。

window对象关系属性

1、parent：如果当前窗口为frame，指向包含该frame的窗口的frame(frame)

2、self：指向当前的window对象，与window同样。（window对象）

3、top：如果当前窗口frame，指向包含该frame的top-level的window对象

4、window：指向当前window对象，与self同意

5、opener：当窗口是用javascript打开时，指向打开它的那个窗口（开启者）

子对象作用

document 提供窗口的文档对象引用

navigator 提供窗口的浏览器对象引用

screen 提供窗口的屏幕对象引用

event 提供窗口的事件对象引用

history 提供窗口的历史对象引用

location 提供location对象的引用（操作文档的URL）

top 返回最上层窗口对象，它是自己的父对象（表示对顶层frame框架的引用）

self 提供引用当前窗口或帧的办法

window 提供当前窗口的引用，与self相同

opener 提供生成当前窗口的窗口引用

parent 返回父窗口：对于通过FRAME生成的窗口，父窗口是FRAMESET元素所在的窗口

属性作用

client 保存浏览器版本与名称信息及其启用特性的信息

closed 窗口关闭时返回（true表示窗口关闭，否则为false）

length 提供集合中的元素个数

name 指定窗口或帧的名称

status 设置或返回窗口底部状态条中的消息

defaultStatus 提供窗口状态条中显示的缺省消息

dialogArguments 返回从主窗口传递给模态对话框的变量或变量数组

dialogHeight 返回对话框的高度

dialogLeft 返回对话框左边坐标

dialogTop 返回对话框上边坐标

dialogWidth 返回对话框的宽度

offscreenBuffering 指定是否对文档使用屏外缓冲

returnValue 指定从模态对话框返回主窗口的数值

方法作用

alert 显示带消息和OK按钮的alert对话框

blur 使对象失去焦点并激活onBlur事件

close 关闭当前浏览器窗口

confirm 显示带消息和OK按钮及Cancel 按钮的确认对话框

focus 使控件取得焦点并执行由onFocus事件指定的代码

navigate 显示某个URL，只用于VBScript

open 打开新窗口并装入指定URL文档

prompt 显示带消息和输入字段的提示对话框

scroll 相对于整个文档冼窗口滚动指定Ｘ和Ｙ偏离量

execScript 执行指定的脚本

setInterval 在指定毫秒数后重复求值一个表达式

setTimeout 在指定毫秒数后求值一个表达式

clearInterval 取消由setInterval启动的间隔

clearTimeout 取消由setTimeout设置的超时

showHelp 显示指定URL的帮助文件

showModalDialog 将HTML文档作为模态对话框打开

打开新窗口：

window.open("URL","名称(自定义)","调整窗体的宽高等等");

关闭自身窗体：

window.close();

系统对话框：

alert("hello"); //警告框

confirm("判断"); //确认框

prompt("'请输入数:") //输入框

事件发生时

onBeforeunload 页面删除之前。这个事件可以让用户不离开页面。可以用脚本编一个事件处理器，显示一个对话框，让用户选择不离开页面

onBlur 对象失去焦点时

onError 装入文档或图形发生错误时

onFocus 对象取得焦点时

onHelp 用户按F1键或单击浏览器Help按钮时

onLoad 浏览器打开指定对象之后

onResize 窗口调整尺寸时

onScroll 滚动框移动时

onUnload 页面删除之前

2 document对象

document是文档对象，提供了许多用于访问文档中所包含ＨＴＭＬ元素的属性。

对象属性

document.title //设置文档标题等价于HTML的<title>标签

document.URL //设置URL属性从而在同一窗口打开另一网页

document.cookie //设置和读出cookie

document.bgColor //设置页面背景色

document.fgColor //设置前景色(文本颜色)

document.linkColor //未点击过的链接颜色

document.alinkColor //激活链接(焦点在此链接上)的颜色

document.vlinkColor //已点击过的链接颜色

document.fileCreatedDate //文件建立日期，只读属性

document.fileModifiedDate //文件修改日期，只读属性

document.fileSize //文件大小，只读属性

document.charset //设置字符集简体中文:gb2312

---------------------------------------------------------------------

对象方法

document.write() //动态向页面写入内容

document.createElement(Tag) //创建一个html标签对象

document.getElementById(ID) //获得指定ID值的对象

document.getElementsByName(Name) //获得指定Name值的对象

---------------------------------------------------------------------

images集合(页面中的图象)

a)通过集合引用

document.images //对应页面上的<img>标签

document.images.length //对应页面上<img>标签的个数

document.images[0] //第1个<img>标签

document.images[i] //第i-1个<img>标签

b)通过nane属性直接引用

<img name="oImage">

document.images.oImage //document.images.name属性

c)引用图片的src属性

document.images.oImage.src //document.images.name属性.src

d)创建一个图象

var oImage

oImage = new Image()

document.images.oImage.src="/1.jpg"

同时在页面上建立一个<img>标签与之对应就可以显示

<html>

<img name=oImage>

<script language="javascript">

var oImage

oImage = new Image()

document.images.oImage.src="/1.jpg"

</script>

</html>

----------------------------------------------------------------------

forms集合(页面中的表单)

a)通过集合引用

document.forms //对应页面上的<form>标签

document.forms.length //对应页面上<form>标签的个数

document.forms[0] //第1个<form>标签

document.forms[i] //第i-1个<form>标签

document.forms[i].length //第i-1个<form>中的控件数

document.forms[i].elements[j] //第i-1个<form>中第j-1个控件

b)通过标签name属性直接引用

<form name="Myform"><input name="myctrl"></form>

document.Myform.myctrl //document.表单名.控件名

-----------------------------------------------------------------------

<html>



<form name="Myform">

<input type="text" name="oText">

<input type="password" name="oPswd">

<form>

<script language="javascript">

//获取文本密码框的值

document.write(document.Myform.oText.value)

document.write(document.Myform.oPswd.value)

</script>

</html>

-----------------------------------------------------------------------

<html>



<form name="Myform">

<select name="oSelect">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

</form>

<script language="javascript">

//遍历select控件的option项

var length

length=document.Myform.oSelect.length

for(i=0;i<length;i++)

document.write(document.Myform.oSelect[i].value)

</script>

<script language="javascript">

//遍历option项并且判断某个option是否被选中

for(i=0;i<document.Myform.oSelect.length;i++){

if(document.Myform.oSelect[i].selected!=true)

document.write(document.Myform.oSelect[i].value)

else

document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")

}

</script>

<script language="javascript">

//根据SelectedIndex打印出选中的option

//(0到document.Myform.oSelect.length-1)

i=document.Myform.oSelect.selectedIndex

document.write(document.Myform.oSelect[i].value)

</script>

<script language="javascript">

//动态增加select控件的option项

var oOption = document.createElement("OPTION");

oOption.text="4";

oOption.value="4";

document.Myform.oSelect.add(oOption);

</script>

<html>

-----------------------------------------------------------------------

<Div id="oDiv">Text</Div>

document.all.oDiv //引用图层oDiv

document.all.oDiv.style

document.all.oDiv.style.display="" //图层设置为可视

document.all.oDiv.style.display="none" //图层设置为隐藏

/*document.all表示document中所有对象的集合

只有ie支持此属性，因此也用来判断浏览器的种类*/

3 history对象

history对象保存当前对话中用户访问的URL信息。它的length属性提供浏览器历史清单中的项目个数。它的方法如表所示，可用于在历史清单中移动。

方法作用

Back 装入历史清单中上一个URL的文档

Forward 装入历史清单中下一个URL的文档

Go 装入历史清单中指定位置的文档——后退一页：window.history.go(-1); (正数为前进)。

4 location对象

location对象提供当前页面的URL信息。它的方法可以重装当前页面或装入新页面。表列出了location对象的属性和方法。

属性作用

hash 返回HREF中#号后面的字符串

host 提供URL的hostname:port部分

hostname 提供URL的hostname部分

href 提供整个URL

pathname 提供URL中第三个斜杠后面的文件名

port 返回URL的端口号

protocol 返回表示URL访问方法的首字母子串

search 提供完整URL中？号后面的查询字符串

　　

5 navigator对象

navigator对象保存浏览器厂家、版本和功能的信息，共五个属性。

属性作用

AppCodeName 提供浏览器的代码名

AppName 提供浏览器的产品名

AppVersion 提供浏览器的版本号

CookieEnabled 表示浏览器是否允许客户机方Cookie

UserAgent 作为HTTP协议的一部分发送的浏览器名

　　

6 screen对象

screen对象的属性保存最终用户的屏幕分辨率和屏幕绘制文档的功能的信息。这个信息在设置浏览器窗口的特征时或要选择几个图形　　这一以充分利用和最终用户的屏幕特性时很有用。表列出了screen对象的属性。

属性作用

height 提供用户屏幕的总高度

width 提供用户屏幕的总宽度

pixelDepth 提供系统每个象素占用的位数

updateInterval 保持用户机器上屏幕更新的间隔

colorDepth 返回用户系统支持的最大颜色个数信息

7frames对象

1 框架编程概述

一个Html 页面可以有一个或多个子框架，这些子框架以<iframe>来标记，用来显示一个独立的Html 页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。

2 框架间的互相引用

一个页面中的所有框架以集合的形式作为window 对象的属性提供，例如：

window.frames 就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是

类似的，不同的是，这些集合是document 的属性。因此，要引用一个子框架，可以使用如

下语法：

window.frames[“frameName”];

window.frames.frameName

window.frames[index]

其中，window字样也可以用self代替或省略，假设frameName 为页面中第一个框架，则以下的写法是等价的：

self.frames[“frameName”]

self.frames[0]

frames[0]

frameName

了解了如何引用一个框架，那么引用的这个框架到底是什么呢？其实，每个框架都对应一个HTML 页面，所以这个框架也是一个独立的浏览器窗口，它具有窗口的所有性质，所谓对框架的引用也就是对window 对象的引用。有了这个window 对象，就可以很方便地对其中的页面进行操作，例如使用window.document对象向页面写入数据、使用window.location属性来改变框架内的页面等。

下面分别介绍不同层次框架间的互相引用：

2.1．父框架到子框架的引用

知道了上述原理，从父框架引用子框架变的非常容易，即：

window.frames[“frameName”];

这样就引用了页面内名为frameName 的子框架。如果要引用子框架内的子框架，根据引用的框架实际就是window对象的性质，可以这样实现：

window.frames[“frameName”].frames[“frameName2”];

这样就很引用到了二级子框架，以此类推，可以实现多层框架的引用。

2.2．子框架到父框架的引用

每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent 还表示该框架本身。

2.3．兄弟框架间的引用

如果两个框架同为一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相引用，例如一个页面包括2 个子框架：

<frameset rows="50%,50%">

<frame src="1.html" name="frame1" />

<frame src="2.html" name="frame2" />

</frameset>

在frame1 中可以使用如下语句来引用frame2：

self.parent.frames[“frame2”];

2.4．不同层次框架间的互相引用

框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，

例如：

self.parent.frames[“childName”].frames[“targetFrameName”];

2.5．对顶层框架的引用

和parent 属性类似，window 对象还有一个top 属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：

//判断本框架是否为顶层框架

if(self==top){

//dosomething

}

3 改变框架的载入页面

前面已经讲到，对框架的引用就是对window对象的引用，利用window对象的location属性，可以改变框架的导航，例如：

window.frames[0].location=”1.html”;

这就将页面中第一个框架的页面重定向到1.html，利用这个性质，甚至可以使用一条链接来更新多个框架。

<frameset rows="50%,50%">

<frame src="1.html" name="frame1" />

<frame src="2.html" name="frame2" />

</frameset>



<a href=”frame1.location=’3.html;frame2.location=’4.html’” onclick=””>link</a>



4 引用其他框架内的JavaScript变量和函数

在介绍引用其他框架内JavaScript变量和函数的技术之前，先来看以下代码：

<script language="JavaScript" type="text/javascript">



</script>

如果运行了这段代码，会弹出“hello,ajax!”的窗口，这正是执行hello()函数的结果。那为什么hello()变成了window对象的方法呢？事实上，在一个页面内定义的所有全局变量和全局函数都是作为window对象的成员。例如：

var a=1;

alert(window.a);

就会弹出对话框显示为1。同样的原理，在不同框架之间共享变量和函数，就是要通过window对象来调用。

为了方便大家的理解，下面举例说明。一个商品浏览页面由两个子框架组成，左侧表示商品分类的链接；当用户单击分类链接时，右侧显示相应的商品列表；用户可以单击商品旁的【购买】链接将商品加入购物车。

在这个例子中，可以利用左侧导航页面来存储用户希望购买的商品，因为当用户单击导航链接时，变化的是另外一个页面，即商品展示页面，而导航页面本身是不变的，因此其中的JavaScript变量不会丢失，可以用来存储全局数据。其实现原理如下：

假设左侧页面为links.html，右侧页面为show.html，页面结构如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> New Document </title>

</head>

<frameset cols="20%,80%">

<frame src="link.html" name="link" />

<frame src="show.html" name="show" />

</frameset>

</html>

在show.html 中展示的商品旁边可以加入这样一条语句：

<a href=”void(0)” onclick=”self.parent.link.addToOrders(32068)”>加入购物车</a>

其中link表示导航框架，在link.html 页面中定义了arrOrders数组来存储商品的id，函数addToOrders()用来响应商品旁边【购买】链接的单击事件，它接收的参数id 表示商品的id，例子中是一个id为32068 的商品：

<script language="JavaScript" type="text/javascript">



</script>

这样，在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。

框架可以使一个页面划分为功能独立的多个模块，每个模块之间彼此独立，但又可以通过window 对象的引用来建立联系，是web 开发中的一个重要机制。在Ajax 开发中，还可利用隐藏框架实现各种技巧，在后面介绍Ajax 实例编程时可以发现，无刷新上传文件以及解决Ajax的前进后退问题都会用到这种技术。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航