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

第6章浏览器对象模型（BOM） 本章将介绍浏览器对象模型（BOM），它是JavaScript编程技术的重要组成部分。 BOM提供了独立于页面内容而与浏览器窗口进行交互的对象。 6.1 浏览器对象 BOM由一系列相关的对象构成，图6-1所示为BOM的基本体系结构。 Window对象是整个BOM的核心，所有对象和集合都以某种方式与window对象关联。 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.1 window对象 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）mpt 该方法将显示一个消息提示框，其中包含一个文本输入框。 用法：mpt([message] [, default]) 4．状态栏控制 浏览器状态的显示信息可以通过window.status属性直接进行修改。 5．定时操作 定时操作通常有两种使用目的，一种是周期性地执行脚本，例如