第6章JavaScript浏览器对象模型BOM共课件.ppt

1、第6章浏览器对象模型（BOM） 本章将介绍浏览器对象模型（本章将介绍浏览器对象模型（BOM），），它是它是JavaScript编程技术的重要组成部分。编程技术的重要组成部分。 BOM提供了独立于页面内容而与浏览提供了独立于页面内容而与浏览器窗口进行交互的对象。器窗口进行交互的对象。 浏览器对象6.1 JavaScript浏览器编程示例6.26.1 浏览器对象 BOM由一系列相关的对象构成，图由一系列相关的对象构成，图6-1所示为所示为BOM的基本体系结构。的基本体系结构。 Window对象是整个对象是整个BOM的核心，所的核心，所有对象和集合都以某种方式与有对象和集合都以某种方式与window

2、对象对象关联。关联。图6-1 BOM对象关系图 BOM中定义了中定义了6种重要的对象：种重要的对象： （1）window对象表示浏览器中打开的窗口；对象表示浏览器中打开的窗口； （2）document对象表示浏览器中加载页面的文对象表示浏览器中加载页面的文档对象；档对象； （3）location对象包含了浏览器当前的对象包含了浏览器当前的URL信息；信息； （4）navigator对象包含了浏览器本身的信息；对象包含了浏览器本身的信息； （5）screen对象包含了客户端屏幕及渲染能力的对象包含了客户端屏幕及渲染能力的信息；信息； （6）history对象包含了浏览器访问网页的历史信对象包含了

3、浏览器访问网页的历史信息。息。 除除window对象之外，其他的对象之外，其他的5个对象都个对象都是是window对象的属性，它们与对象的属性，它们与window对象对象的关系如图的关系如图6-1所示。所示。 下面将从下面将从window对象开始讨论对象开始讨论BOM。6.1.1 window对象对象 Window对象表示整个浏览器窗口，但不包括对象表示整个浏览器窗口，但不包括其中的页面内容。其中的页面内容。 Window对象可以用于移动或者调整其对应对象可以用于移动或者调整其对应的浏览器窗口的大小，或者对它产生其他影响。的浏览器窗口的大小，或者对它产生其他影响。 在浏览器宿主环境下，在浏览器

4、宿主环境下，window对象就是对象就是JavaScript的的Global对象，因此使用对象，因此使用window对象对象的属性和方法是不需要特别指明的。的属性和方法是不需要特别指明的。 例如我们经常使用的例如我们经常使用的alert方法，实际上完整方法，实际上完整的调用形式应该是的调用形式应该是window.alert，通常情况下我们，通常情况下我们在代码中会省略在代码中会省略window对象的声明，直接使用其对象的声明，直接使用其方法。方法。 window对象对应着对象对应着Web浏览器的窗口，浏览器的窗口，使用它可以直接对浏览器窗口进行操作。使用它可以直接对浏览器窗口进行操作。wind

5、ow对象提供的主要功能可以分为以下对象提供的主要功能可以分为以下5类：类： （1）调整窗口的大小和位置；）调整窗口的大小和位置； （2）打开新窗口；）打开新窗口； （3）系统提示框；）系统提示框； （4）状态栏控制；）状态栏控制； （5）定时操作。）定时操作。1调整窗口的大小和位置 （1）window.moveBy 该方法将浏览器窗口移动指定的距离（相该方法将浏览器窗口移动指定的距离（相对定位）。对定位）。 用法：用法：window.moveBy(dx, dy)（2）window.moveTo 该方法将浏览器窗口移动到指定的位置该方法将浏览器窗口移动到指定的位置（绝对定位）。（绝对定位）。 用

6、法：用法：window.moveTo(x, y)（3）window.resizeBy 该方法将浏览器窗口的大小改变为指定的该方法将浏览器窗口的大小改变为指定的宽度和高度（相对调整窗口大小）。宽度和高度（相对调整窗口大小）。 用法：用法：window.resizeBy(dw, dh)（4）window.resizeTo 该方法将浏览器窗口的大小改变为指定的该方法将浏览器窗口的大小改变为指定的宽度和高度（绝对调整窗口大小）。宽度和高度（绝对调整窗口大小）。 用法：用法：window.resizeTo(w, h)2打开新窗口 用法：用法：window.open(url , target , opti

7、ons) options参数可能的选项包括：参数可能的选项包括： （1）height: 窗口的高度，单位为像素；窗口的高度，单位为像素； （2）width：窗口的宽度，单位为像素；：窗口的宽度，单位为像素； （3）left：窗口的左边缘位置；：窗口的左边缘位置； （4）top：窗口的上边缘位置；：窗口的上边缘位置； （5）fullscreen：是否全屏，默认值为：是否全屏，默认值为no； （6）location: 是否显示地址栏，默认值为是否显示地址栏，默认值为yes；（7）menubar: 是否显示菜单项，默认值为是否显示菜单项，默认值为yes；（8）resizable: 是否允许改变窗口大

8、小，默认值为是否允许改变窗口大小，默认值为yes；（9）scrollbars: 是否显示滚动条，默认值为是否显示滚动条，默认值为yes；（10）status: 是否显示状态栏，默认值为是否显示状态栏，默认值为yes；（11）titlebar: 是否显示标题栏，默认值为是否显示标题栏，默认值为yes；（12）toolbar: 是否显示工具条，默认值为是否显示工具条，默认值为yes。 3系统对话框 （1）window.alert 该方法将显示消息提示框。该方法将显示消息提示框。 用法：用法：window.alert(message)（2）window.confirm 该方法将显示一个确认提示框，其

9、中该方法将显示一个确认提示框，其中包括包括“确定确定”和和“取消取消”按钮。按钮。 用 户 单 击用 户 单 击 “ 确 定确 定 ” 按 钮 时 ，按 钮 时 ，window.confirm返回返回true；单击；单击“取消取消”按按钮时，钮时，window.confirm返回返回false。 用法：用法：window.confirm(message)（3）window.prompt 该方法将显示一个消息提示框，其中包含该方法将显示一个消息提示框，其中包含一个文本输入框。一个文本输入框。 用法：用法：window.prompt(message , default)4状态栏控制状态栏控制 浏览

10、器状态的显示信息可以通过浏览器状态的显示信息可以通过window.status属性直接进行修改。属性直接进行修改。 5定时操作定时操作 定时操作通常有两种使用目的，一种定时操作通常有两种使用目的，一种是周期性地执行脚本，例如在页面上显示是周期性地执行脚本，例如在页面上显示时钟，需要每隔一秒钟更新一次，另一种时钟，需要每隔一秒钟更新一次，另一种则是将某个操作延时一段时间执行，例如则是将某个操作延时一段时间执行，例如某 个 特 别 耗 时 的 操 作 ， 可 以 使 用某 个 特 别 耗 时 的 操 作 ， 可 以 使 用window.setTimeout函数使其延时执行，而函数使其延时执行，而后

11、面的脚本可以继续运行不受影响。后面的脚本可以继续运行不受影响。（1）window.setInterval 该函数用于设置定时器，每隔一段时间执该函数用于设置定时器，每隔一段时间执行指定的代码。行指定的代码。 用法：用法：window.setInterval(code, interval) 【例【例6-1】 timer1.html（2）window.clearInterval 该函数用于清除该函数用于清除setInterval函数设置的定时函数设置的定时器。器。 用法：用法：window.clearInterval(timer) 【例【例6-2】 counter1.html （3）window.

12、setTimeout 该函数用于设置定时器，在一段时间之后该函数用于设置定时器，在一段时间之后执行指定的代码。执行指定的代码。 用法：用法：window.setTimeout(code, time) 【例【例6-3】 timer2.html （4）window.clearTimeout 该函数用于清除该函数用于清除setTimeout函数设置的定时函数设置的定时器。器。 用法：用法：window.clearTimeout(timer) 【例【例6-4】 counter2.html 6.1.2 document对象对象 document对象实际上是对象实际上是window的属性，的属性，docu

13、ment对象的独特之处是它既属于对象的独特之处是它既属于BOM又属又属于于DOM。 从从BOM角度看，角度看，document对象由一系列集合构对象由一系列集合构成，这些集合可以访问文档的各个部分，并提供成，这些集合可以访问文档的各个部分，并提供页面自身的信息。页面自身的信息。 由于由于BOM没有统一的标准，各种浏览器中的没有统一的标准，各种浏览器中的document对象特性并不完全相同，因此在使用对象特性并不完全相同，因此在使用document对象时需要特别注意，尽量要使用各类对象时需要特别注意，尽量要使用各类浏览器都支持的通用属性和方法。浏览器都支持的通用属性和方法。1通用属性 （1）do

14、cument.bgColor 该属性为页面的背景色。该属性为页面的背景色。 （2）document.fgColor 该属性为页面的前景色。该属性为页面的前景色。 （3）documentColor 该属性为页面文档中链接的颜色。该属性为页面文档中链接的颜色。 （4）document.vlinkColor 该属性为页面文档中访问过的链接颜色。该属性为页面文档中访问过的链接颜色。 （5）document.alinkColor 该属性为页面文档中激活链接的颜色。该属性为页面文档中激活链接的颜色。 （6）document.domain 该属性为文档所在的域名。该属性为文档所在的域名。 （7）docume

15、nt.referrer 该属性为将用户引入当前页面的该属性为将用户引入当前页面的URL。 （8）document.URL 该属性为当前页面的该属性为当前页面的URL。 （9）document.title 该属性为当前页面的标题。该属性为当前页面的标题。 （10）document.lastModified 该属性为上次修改页面的时间。该属性为上次修改页面的时间。 （11）document.cookie 该属性用于设置或者读取该属性用于设置或者读取Cookie的值。的值。 【例【例6-5】 Cookie存取函数存取函数2集合属性 表6-1 document对象的集合属性属 性含 义anchors返

16、回文档中所有锚的集合说明：IE中document.anchors将返回所有具有name或者id属性的锚；而在Mozilla Firefox中document.anchors将返回所有具有name属性的锚applets返回文档中所有applet的集合embeds返回文档中所有embed对象的集合forms返回文档中所有表单的集合images返回文档中所有img对象的集合links返回文档中所有链接的集合，即所有设置了href属性的元素 3方法 （1）document.write/writeln 该方法用于在当前文档中输出文字。该方法用于在当前文档中输出文字。 用法：用法： document.wr

17、ite(text) document.writeln(text)（2）document.open document.open和和document.close是一组方是一组方法，通常与法，通常与document.write/writeln方法配方法配合使用。其中，合使用。其中，document.open方法用于打方法用于打开文档准备写入内容。开文档准备写入内容。 用法：用法：document.open()（3）document.close 该方法用于关闭文档，同时将写入的内容该方法用于关闭文档，同时将写入的内容输出到页面。输出到页面。 用法：用法：document.close()6.1.3 lo

18、cation对象对象表6-2location对象属性属 性说 明location.hash当前页面的URL中“#”号后面的部分location.host当前页面的URL中主机名和端口的部分location.hostname主机名location.href当前页面的URLlocation.pathname当前页面的相对路径location.port端口号location.protocol协议名称location.search当前页面的URL中问号后的部分表6-3 location对象属性属 性值location.hash#testlocation.hostsomedomain:8021locat

19、ion.hostnamesomedomainlocation.hrefsomedomain:8021/ex/test5.html?q=a#testlocation.pathname/ex/test5.htmllocation.port8021location.protocolhttp:location.search?q=a6.1.4 navigator对象对象 navigator对象包含了关于对象包含了关于Web浏览器的浏览器的信息，浏览器的类型、版本信息都可以从信息，浏览器的类型、版本信息都可以从该对象中获取。该对象中获取。 表表6-4给出了给出了navigator对象各个属性的对象各个属性

20、的含义。含义。 表6-4navigator对象属性属 性说 明navigator.appCodeName浏览器代码名称navigator.appName浏览器名称navigator.appVersion浏览器运行平台和版本navigator.cookieEnabled浏览器是否接受Cookie属 性说 明navigator.onLine浏览器是否为在线状态（非脱机）navigator.platform浏览器运行平台navigator.userAgentHTTP用户代理请求头的字符串续表表6-5 navigator对象属性值示例属 性IE 6.0Mozilla Firefox 2.0naviga

21、tor.appCodeNameMozillaMozillanavigator.appNameMicrosoft Internet ExplorerNetscapenavigator.appVersion4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)5.0 (Windows; zh-CN)navigator.cookieEnabledtruetruenavigator.onLinetruetruenavigator.platformWin32Win32navigator.

22、userAgentMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; S V 1 ; . N E T C L R 1 . 1 . 4 3 2 2 ; . N E T C L R 2.0.50727)Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.8.1.3) Gecko/20190309 Firefox/2.0.0.3 6.1.5 screen对象对象表6-6screen对象属性属 性含 义典型值screen.height屏幕的垂直分辨率，单位为像素800screen.width屏幕的水

23、平分辨率，单位为像素1280screen.availHeight可用的屏幕高度（排除操作系统元素占用的高度，如Windows任务栏的高度）770screen.availWidth可用的屏幕宽度（排除操作系统元素占用的宽度，如Windows任务栏的宽度）说明：通常情况下Windows任务栏位于窗口底部，此时screen.width与srceen.avialWidth相同1280screen.colorDepth屏幕的色彩深度32 【例【例6-6】 screen对象应用示例对象应用示例 6.1.6 history对象对象 表6-7history对象属性和方法属性/方法含 义history.leng

24、th浏览历史记录的总数history.go(index)从浏览历史中加载URL，index参数是加载URL的相对位置，index为负数时表示当前地址之前的浏览记录，index为正数时表示当前地址之后的浏览记录history.forward()从浏览历史中加载下一个URL，相当于history.go(1)history.back()从浏览历史中加载上一个URL，相当于history.go(-1) 6.2 JavaScript浏览器编程示例 在在JavaScript中进行浏览器编程通常包括以中进行浏览器编程通常包括以下几种情况：下几种情况： （1）浏览器窗口的控制；）浏览器窗口的控制； （2）定时

25、操作；）定时操作； （3）页面之间的参数传递；）页面之间的参数传递； （4）浏览器类型、操作系统类型的判断。）浏览器类型、操作系统类型的判断。 下面将按照以上的应用需求分别介绍相关下面将按照以上的应用需求分别介绍相关的示例。的示例。6.2.1 控制浏览器窗口控制浏览器窗口 1打开新窗口打开新窗口 window.open方法的使用方法在前面已方法的使用方法在前面已经作了说明，然而在实际应用中，仅仅打经作了说明，然而在实际应用中，仅仅打开一个新的窗口并不能真正解决问题。开一个新的窗口并不能真正解决问题。 考虑一个实际的应用场景：在邮件系考虑一个实际的应用场景：在邮件系统中写新邮件或者回复邮件时，我

26、们一般统中写新邮件或者回复邮件时，我们一般会在主界面上直接编辑邮件内容，如果邮会在主界面上直接编辑邮件内容，如果邮件还没有编辑完成，我们却需要查看其他件还没有编辑完成，我们却需要查看其他邮件，这时就要开启一个新的浏览器窗口邮件，这时就要开启一个新的浏览器窗口继续编辑邮件内容。继续编辑邮件内容。 当然，我们希望已经编辑的部分能够当然，我们希望已经编辑的部分能够在新浏览器窗口中保留。在新浏览器窗口中保留。 图图6-2所示的所示的Gmail邮件系统就具有类邮件系统就具有类似的功能，下面我们将模仿它实现一个简似的功能，下面我们将模仿它实现一个简单的示例。单的示例。（a）Gmail主界面 （b）在新窗口

27、中编辑邮件图6-2 Gmail邮件编辑界面 【例【例6-7】 ex1.html 【例【例6-8】 ex2.html 2窗口最大化 这里所说的这里所说的“窗口最大化窗口最大化”并不是指并不是指单击浏览器窗口右上角的单击浏览器窗口右上角的“最大化最大化”按钮，按钮，在正常情况下，浏览器窗口中菜单栏、工在正常情况下，浏览器窗口中菜单栏、工具条、地址栏都会占用一些空间，而在一具条、地址栏都会占用一些空间，而在一些些Web应用中我们希望能够使用最大化的应用中我们希望能够使用最大化的工作区域，而将菜单、工具条等隐藏。工作区域，而将菜单、工具条等隐藏。 【例【例6-9】 ex3.html 图6-5 Fire

28、fox参数配置界面 【例【例6-10】 ex4.html 3父子窗口间交互 通过通过window.open方法打开的窗口一般方法打开的窗口一般不是孤立的，它与父窗口通常需要进行数据不是孤立的，它与父窗口通常需要进行数据的交互。的交互。 例如很多应用系统都会提供这样的检索例如很多应用系统都会提供这样的检索功能：在进行比较复杂的检索时，通常会打功能：在进行比较复杂的检索时，通常会打开一个新的窗口，用户在新窗口加载的页面开一个新的窗口，用户在新窗口加载的页面中输入检索条件，单击中输入检索条件，单击“确定确定”按钮，检索按钮，检索条件将送回给父窗口，父窗口根据得到的条条件将送回给父窗口，父窗口根据得到

29、的条件进行检索并且更新页面的显示，同时关闭件进行检索并且更新页面的显示，同时关闭子窗口。子窗口。 （a）父窗口 （b）输入检索条件 （c）检索结果图6-6 父子窗口交互示例 【例【例6-11】 ex5.html 【例【例6-12】 ex6.html 6.2.2 延时生效按钮延时生效按钮 延时生效按钮经常会在网站的注册过延时生效按钮经常会在网站的注册过程中使用到，其作用主要是为了让用户停程中使用到，其作用主要是为了让用户停留几秒钟，仔细阅读使用该网站必须要遵留几秒钟，仔细阅读使用该网站必须要遵守的协议。守的协议。 （a）不可用状态 （b）可用状态图6-7 延时生效按钮 【例【例6-13】 ex1

30、0.html 6.2.3 页面间参数传递页面间参数传递 页面之间的参数传递是页面之间的参数传递是Web开发中经开发中经常需要解决的问题，往往也是导致初学者常需要解决的问题，往往也是导致初学者容易犯错误的问题。容易犯错误的问题。 传递参数的方法有很多，前面介绍的传递参数的方法有很多，前面介绍的父子窗口间交互，实际上就是一种参数传父子窗口间交互，实际上就是一种参数传递的方法，当然这种方法只能局限于这种递的方法，当然这种方法只能局限于这种有父子关联关系的窗口使用。有父子关联关系的窗口使用。 还有一种被普遍应用的方法是将参数还有一种被普遍应用的方法是将参数放置在表单的某个放置在表单的某个域中，通过页面

31、域中，通过页面请求将参数传递到另一个页面。这种方法请求将参数传递到另一个页面。这种方法需要服务器端的配合，数据实际上经过了需要服务器端的配合，数据实际上经过了一个客户端一个客户端服务器服务器客户端的传递过程。客户端的传递过程。 这一节将介绍另外两种页面间传递参这一节将介绍另外两种页面间传递参数的方法，即利用数的方法，即利用Cookie和和URL传递参数。传递参数。1使用Cookie传递参数 Cookie可以在客户端保存少量的用户可以在客户端保存少量的用户数据，因此它用于页面间参数传递当然是数据，因此它用于页面间参数传递当然是可行的。可行的。 使用使用Cookie传递参数的思路很简单：传递参数的

32、思路很简单：在一个页面中使用在一个页面中使用Cookie保存数据，在另保存数据，在另一个页面中读取同样的一个页面中读取同样的Cookie值。值。 Cookie传递参数的一个典型应用是保传递参数的一个典型应用是保存用户登录信息。存用户登录信息。 图6-8 用户登录界面 【例【例6-14】 ex7.html （a）登录成功 （b）未登录图6-9 用户登录界面 【例【例6-15】 ex8.html 2使用URL传递参数 使用使用URL进行参数传递是比较常见的进行参数传递是比较常见的做法，做法，URL中问号之后的部分可以作为参中问号之后的部分可以作为参数传递的载体，例如：数传递的载体，例如： loca

33、lhost:8021/ex/ex9.html?username=test&password=password 通过解析问号之后的部分（例如：通过解析问号之后的部分（例如：username=test&password=password），即），即可获取参数的值。可获取参数的值。 例例6-16和例和例6-17将通过将通过URL传递参数传递参数的方式实现网页动态换肤，基本思路是根的方式实现网页动态换肤，基本思路是根据据URL中的参数选择相应的中的参数选择相应的CSS样式表，样式表，最终效果如图最终效果如图6-10所示，其中所示，其中CSS样式表如样式表如例例6-16所示。所示。 （a）默认样式 （b

34、）蓝色样式图6-10 网页动态换肤效果 【例【例6-16】 CSS样式表样式表 【例【例6-17】 ex9.html 6.2.4 检测浏览器及操作系统类型检测浏览器及操作系统类型 完 成 一 件 工 作 往 往 有 多 种 方 法 ， 在完 成 一 件 工 作 往 往 有 多 种 方 法 ， 在JavaScript中进行浏览器检测也有多种不同的形中进行浏览器检测也有多种不同的形式。式。 一种方式是根据一种方式是根据navigator对象的对象的userAgent和和appVersion属性提供的信息进行判断，另一种方属性提供的信息进行判断，另一种方式是通过对象或者属性的存在与否来检测，例如式是

35、通过对象或者属性的存在与否来检测，例如document.all是是IE独有的特性，可以作为判断独有的特性，可以作为判断IE浏览器的条件。浏览器的条件。 当然我们也可以同时使用这两种方式，例当然我们也可以同时使用这两种方式，例6-18所示的代码可以获取浏览器、操作系统类型相所示的代码可以获取浏览器、操作系统类型相关的信息。关的信息。 【例【例6-18】 获取浏览器信息获取浏览器信息 表6-8browser对象属性和方法属 性含 义browser.UAuserAgent字符串browser.AVappVersion字符串browser.os.mac是否为Macintosh操作系统browser.o

36、s.win是否为Windows操作系统browser.os.linux是否为Linux、Unix操作系统browser.opera是否为Opera浏览器browser.khtml是否基于KHTML（Konqueror或者Safari浏览器）browser.safari是否为Safari浏览器browser.mozilla是否为Mozilla浏览器browser.geckoVersiongecko引擎版本，YYYYMMDD形式browser.ie是否为IE浏览器browser.ie50是否为IE 5.0browser.ie55是否为IE 5.5browser.ie60是否为IE 6.0browser.ie70是否为IE 7.0小 结 本章介绍了浏览器对象模型（本章介绍了浏览器对象模型（BOM）以及在以及在JavaScript中使用中使用BOM进行浏览器进行浏览器编程的相关技术，并且通过示例详细地说编程的相关技术，并且通过示例详细地说明了明了BOM在在Web开发中的应用。开发中的应用。