javascrpt-BOM剖析.ppt

JAVASCRIPT+BOM javascript与浏览器交互能力 BOM 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。 获取或设置浏览器窗口大小 打开关闭新窗口 移动窗口 window 代表浏览器中一个打开的窗口。 典型情况下，浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象。但是，如果一个文档定义了一个或多个框架(即，包含一个或多个 frame 或 iframe 标签)，浏览器就会为原始文档创建一个 window 对象，再为每个框架创建额外的 window 对象。这些额外的对象是原始窗口的 子窗口，可能被原始窗口中发生的事件所影响。例如，关闭原始窗口将导致关闭全部子窗口。如果想要创建新窗口(以及对应的 window 对象)，可以使用像 open, showModalDialog 和 showModelessDialog 这样的方法。 window 所有浏览器都支持?window?对象。它表示浏览器窗口。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。 甚至 HTML DOM 的 document 也是 window 对象的属性之一：window.document和document是等效的 获取浏览器窗口大小 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5： document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth 实用的 JavaScript 方案（涵盖所有浏览器）： var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 其他 Window 方法 window对象还有很多其他方法，下面是特别需要注意的： alert confirm prompt blur focus close open scroll scrollTo scrollBy setInterval setTimeout clearInterval clearTimeout showModalDialog showModelessDialog window中的子对象 clientInformation包含关于 Web 浏览器的信息。 clipboardData提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。 document代表给定浏览器窗口中的 HTML 文档。 event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。 history包含了用户已浏览的 URL 的信息。 location包含关于当前 URL 的信息。 navigator包含关于 Web 浏览器的信息。 screen包含关于客户屏幕和渲染能力的信息。 * *