JavaScript浏览器对象模型B.ppt

第6章浏览器对象模型 BOM 本章将介绍浏览器对象模型 BOM 它是JavaScript编程技术的重要组成部分 BOM提供了独立于页面内容而与浏览器窗口进行交互的对象 6 1浏览器对象 BOM由一系列相关的对象构成 图6 1所示为BOM的基本体系结构 Window对象是整个BOM的核心 所有对象和集合都以某种方式与window对象关联 图6 1BOM对象关系图 BOM中定义了6种重要的对象 1 window对象表示浏览器中打开的窗口 2 document对象表示浏览器中加载页面的文档对象 3 location对象包含了浏览器当前的URL信息 4 navigator对象包含了浏览器本身的信息 5 screen对象包含了客户端屏幕及渲染能力的信息 6 history对象包含了浏览器访问网页的历史信息 除window对象之外 其他的5个对象都是window对象的属性 它们与window对象的关系如图6 1所示 下面将从window对象开始讨论BOM 6 1 1window对象 Window对象表示整个浏览器窗口 但不包括其中的页面内容 Window对象可以用于移动或者调整其对应的浏览器窗口的大小 或者对它产生其他影响 在浏览器宿主环境下 window对象就是JavaScript的Global对象 因此使用window对象的属性和方法是不需要特别指明的 例如我们经常使用的alert方法 实际上完整的调用形式应该是window alert 通常情况下我们在代码中会省略window对象的声明 直接使用其方法 window对象对应着Web浏览器的窗口 使用它可以直接对浏览器窗口进行操作 window对象提供的主要功能可以分为以下5类 1 调整窗口的大小和位置 2 打开新窗口 3 系统提示框 4 状态栏控制 5 定时操作 1 调整窗口的大小和位置 1 window moveBy该方法将浏览器窗口移动指定的距离 相对定位 用法 window moveBy dx dy 2 window moveTo 该方法将浏览器窗口移动到指定的位置 绝对定位 用法 window moveTo x y 3 window resizeBy 该方法将浏览器窗口的大小改变为指定的宽度和高度 相对调整窗口大小 用法 window resizeBy dw dh 4 window resizeTo 该方法将浏览器窗口的大小改变为指定的宽度和高度 绝对调整窗口大小 用法 window resizeTo w h 2 打开新窗口 用法 window open url target options options参数可能的选项包括 1 height 窗口的高度 单位为像素 2 width 窗口的宽度 单位为像素 3 left 窗口的左边缘位置 4 top 窗口的上边缘位置 5 fullscreen 是否全屏 默认值为no 6 location 是否显示地址栏 默认值为yes 7 menubar 是否显示菜单项 默认值为yes 8 resizable 是否允许改变窗口大小 默认值为yes 9 scrollbars 是否显示滚动条 默认值为yes 10 status 是否显示状态栏 默认值为yes 11 titlebar 是否显示标题栏 默认值为yes 12 toolbar 是否显示工具条 默认值为yes 3 系统对话框 1 window alert该方法将显示消息提示框 用法 window alert message 2 window confirm 该方法将显示一个确认提示框 其中包括 确定 和 取消 按钮 用户单击 确定 按钮时 window confirm返回true 单击 取消 按钮时 window confirm返回false 用法 window confirm message 3 window prompt 该方法将显示一个消息提示框 其中包含一个文本输入框 用法 window prompt message default 4 状态栏控制 浏览器状态的显示信息可以通过window status属性直接进行修改 5 定时操作 定时操作通常有两种使用目的 一种是周期性地执行脚本 例如在页面上显示时钟 需要每隔一秒钟更新一次 另一种则是将某个操作延时一段时间执行 例如某个特别耗时的操作 可以使用window setTimeout函数使其延时执行 而后面的脚本可以继续运行不受影响 1 window setInterval 该函数用于设置定时器 每隔一段时间执行指定的代码 用法 window setInterval code interval 例6 1 timer1 html 2 window clearInterval 该函数用于清除setInterval函数设置的定时器 用法 window clearInterval timer 例6 2 counter1 html 3 window setTimeout 该函数用于设置定时器 在一段时间之后执行指定的代码 用法 window setTimeout code time 例6 3 timer2 html 4 window clearTimeout 该函数用于清除setTimeout函数设置的定时器 用法 window clearTimeout timer 例6 4 counter2 html 6 1 2document对象 document对象实际上是window的属性 document对象的独特之处是它既属于BOM又属于DOM 从BOM角度看 document对象由一系列集合构成 这些集合可以访问文档的各个部分 并提供页面自身的信息 由于BOM没有统一的标准 各种浏览器中的document对象特性并不完全相同 因此在使用document对象时需要特别注意 尽量要使用各类浏览器都支持的通用属性和方法 1 通用属性 1 document bgColor该属性为页面的背景色 2 document fgColor该属性为页面的前景色 3 document linkColor该属性为页面文档中链接的颜色 4 document vlinkColor该属性为页面文档中访问过的链接颜色 5 document alinkColor该属性为页面文档中激活链接的颜色 6 document domain该属性为文档所在的域名 7 document referrer该属性为将用户引入当前页面的URL 8 document URL该属性为当前页面的URL 9 document title该属性为当前页面的标题 10 document lastModified该属性为上次修改页面的时间 11 document cookie该属性用于设置或者读取Cookie的值 例6 5 Cookie存取函数 2 集合属性 表6 1document对象的集合属性 3 方法 1 document write writeln该方法用于在当前文档中输出文字 用法 document write 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 3location对象 表6 2location对象属性 表6 3location对象属性 6 1 4navigator对象 navigator对象包含了关于Web浏览器的信息 浏览器的类型 版本信息都可以从该对象中获取 表6 4给出了navigator对象各个属性的含义 表6 4navigator对象属性 续表 表6 5navigator对象属性值示例 6 1 5screen对象 表6 6screen对象属性 例6 6 screen对象应用示例 6 1 6history对象 表6 7history对象属性和方法 6 2JavaScript浏览器编程示例 在JavaScript中进行浏览器编程通常包括以下几种情况 1 浏览器窗口的控制 2 定时操作 3 页面之间的参数传递 4 浏览器类型 操作系统类型的判断 下面将按照以上的应用需求分别介绍相关的示例 6 2 1控制浏览器窗口 1 打开新窗口window open方法的使用方法在前面已经作了说明 然而在实际应用中 仅仅打开一个新的窗口并不能真正解决问题 考虑一个实际的应用场景 在邮件系统中写新邮件或者回复邮件时 我们一般会在主界面上直接编辑邮件内容 如果邮件还没有编辑完成 我们却需要查看其他邮件 这时就要开启一个新的浏览器窗口继续编辑邮件内容 当然 我们希望已经编辑的部分能够在新浏览器窗口中保留 图6 2所示的Gmail邮件系统就具有类似的功能 下面我们将模仿它实现一个简单的示例 a Gmail主界面 b 在新窗口中编辑邮件图6 2Gmail邮件编辑界面 例6 7 ex1 html 例6 8 ex2 html 2 窗口最大化 这里所说的 窗口最大化 并不是指单击浏览器窗口右上角的 最大化 按钮 在正常情况下 浏览器窗口中菜单栏 工具条 地址栏都会占用一些空间 而在一些Web应用中我们希望能够使用最大化的工作区域 而将菜单 工具条等隐藏 例6 9 ex3 html 图6 5Firefox参数配置界面 例6 10 ex4 html 3 父子窗口间交互 通过window open方法打开的窗口一般不是孤立的 它与父窗口通常需要进行数据的交互 例如很多应用系统都会提供这样的检索功能 在进行比较复杂的检索时 通常会打开一个新的窗口 用户在新窗口加载的页面中输入检索条件 单击 确定 按钮 检索条件将送回给父窗口 父窗口根据得到的条件进行检索并且更新页面的显示 同时关闭子窗口 a 父窗口 b 输入检索条件 c 检索结果图6 6父子窗口交互示例 例6 11 ex5 html 例6 12 ex6 html 6 2 2延时生效按钮 延时生效按钮经常会在网站的注册过程中使用到 其作用主要是为了让用户停留几秒钟 仔细阅读使用该网站必须要遵守的协议 a 不可用状态 b 可用状态图6 7延时生效按钮 例6 13 ex10 html 6 2 3页面间参数传递 页面之间的参数传递是Web开发中经常需要解决的问题 往往也是导致初学者容易犯错误的问题 传递参数的方法有很多 前面介绍的父子窗口间交互 实际上就是一种参数传递的方法 当然这种方法只能局限于这种有父子关联关系的窗口使用 还有一种被普遍应用的方法是将参数放置在表单的某个域中 通过页面请求将参数传递到另一个页面 这种方法需要服务器端的配合 数据实际上经过了一个客户端 服务器 客户端的传递过程 这一节将介绍另外两种页面间传递参数的方法 即利用Cookie和URL传递参数 1 使用Cookie传递参数 Cookie可以在客户端保存少量的用户数据 因此它用于页面间参数传递当然是可行的 使用Cookie传递参数的思路很简单 在一个页面中使用Cookie保存数据 在另一个页面中读取同样的Cookie值 Cookie传递参数的一个典型应用是保存用户登录信息 图6 8用户登录界面 例6 14 ex7 html a 登录成功 b 未登录图6 9用户登录界面 例6 15 ex8 html 2 使用URL传递参数 使用URL进行参数传递是比较常见的做法 URL中问号之后的部分可以作为参数传递的载体 例如 http localhost 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 蓝色样式图6 10网页动态换肤效果 例6 16 CSS样式表 例6 17 ex9 html 6 2 4检测浏览器及操作系统类型 完成一件工作往往有多种方法 在JavaScript中进行浏览器检测也有多种不同的