浏览器对象模型(Browser Object Model)

什么是BOM?

基本的BOM体系结构图

能利用BOM做什么?

BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象,以使得我们可以通过这个入口来使用DOM的强大功能!!!

window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。由于window是顶层对象,因此调用它的子对象时可以不显示的指明window对象,例如下面两行代码是一样的:

document.write("BOM");window.document.write("BOM");

window — window对象是BOM中所有对象的核心。window对象表示整个浏览器窗口,但不必表示其中包含的内容。此外,window还可用于移动或调整它表示的浏览器的大小,或者对它产生其他影响。

JavaScript中的任何一个全局函数或变量都是window的属性

window子对象

window对象关系属性

window对象定位属性

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属性判断浏览器窗口自身的大小。window对象的方法

window.open方法语法

window.open(url, name, features, replace);

open方法参数说明

open函数features参数说明,如果不使用第三个参数,将打开一个新的普通窗口

参数名称类型说明

 特性字符串中的每个特性使用逗号分隔,每个特性之间不允许有空格

open方法返回值为一个新窗体的window对象的引用

setTimeout与setInterval方法有两个参数,第一个参数可以为字符串形式的代码,也可以是函数引用,第二个参数为间隔毫秒数,它们的返回是一个可用于对应clear方法的数字ID

var tid = setTimeout("alert(‘1’)",1000);alert(tid);clearTimeout(tid);

History对象,在浏览器历史记录中导航

History 对象的属性:length 返回浏览器历史列表中的 URL 数量

History 对象的方法

Location 对象

Location 对象的属性

Location 对象的方法

assign() 加载新的文档,这与直接将一个URL赋值给Location对象的href属性效果是一样的reload() 重新加载当前文档,如果该方法没有规定参数,,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。replace() 用新的文档替换当前文档,replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前纪录。Navigator对象

Navigator 对象的属性

框架与多窗口通信子窗口与父窗口

只有自身和使用window.open方法打开的窗口和才能被JavaScript访问,window.open方法打开的窗口通过window.opener属性来访问父窗口。 而在opener窗口中,可以通过window.open方法的返回值来访问打开的窗口!

框架

window.frames集合:在框架集或包含iframe标签的页面中,frames集合包含了对有框架中窗口的引用

alert(frames.length);//框架的数目alert(frames[0].document.body.innerHTML);alert(frames["frame1"].document.title);

在框架集中还可以使用ID来获取子窗口的引用

frame1Win = frame1.contentWindow;frameDoc = frame1.contentDocument;alert(frameDoc);//但IE不支持contentDocument属性

子窗口访问父窗口——window对象的parent属性子窗口访问顶层——window对象的top属性浏览器检测

市场上的浏览器种类多的不计其数,它们的解释引擎各不相同,期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候,然而开发者不能干等着那天。历史上已经有不少方法来解决浏览器兼容问题了,主要分为两种:1.userAgent字符串检测,2.对象检测;当然,也不能考虑所有的浏览器,我们需要按照客户需求来,如果可以确信浏览网站的用户都使用或大部分使用IE浏览器,那么你大可放心的使用IE专有的那些丰富的扩展,当然,一旦用户开始转向另一个浏览,那么痛苦的日子便开始了。下面是市场上的主流浏览器列表:

是我一生的快乐;失去你,是我一生的遗憾;没有你,无法感受心灵的震撼。

浏览器对象模型(Browser Object Model)

相关文章:

你感兴趣的文章:

标签云: