[TOC] ## 8.1 window对象 BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。 ### 8.1.1 全局作用域 由于window是ECMAScript规定的Global对象，因此所有在全局作用域中生命的变量、函数都会变成window对象的属性和方法。 全局变量不能通过`delete`操作符删除，而直接在window对象上的定义的属性可以。 ### 8.1.2 窗口 **1.窗口位置** 取得窗口相对于屏幕左边和上边的位置： `screenLeft、screenRight（除FF）`；`screenX、screenY（FF）` 以下代码可以跨浏览器取得窗口左边和上边位置（仍存在兼容性问题，建议不要使用） ~~~ var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY; ~~~ 移动\调整浏览器窗体的方法：`window.moveTo(newX，newY)、window.moveBy(lengthX，lengthY)` **2. 窗口大小** 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于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; ~~~ 调整窗口大小（Opera和IE7以上禁用）： `window.resizeTo(newLen，newWid)、window.resizeBy(addLen,addWid)` **3. 导航和打开窗口** **window.open()**方法返回一个指向**新窗口的引用**，这个新窗口通常解除了对移动、调整浏览器窗口方法的限制，而且可以使用window.close()方法关闭它。 `window.open(URL,name,features,replace)` | 参数 | 描述 | |---|---| | URL | 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。| | name | 一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记` <a> `和`<form>`的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。| | features | 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。| | replace | 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。true - URL 替换浏览历史中的当前条目。false - URL 在浏览历史中创建新的条目。| |窗口特征|描述| |---|---| | channelmode=yes/no/1/0 | 是否使用剧院模式显示窗口。默认为 no。| | directories=yes/no/1/0 | 是否添加目录按钮。默认为 yes。| | fullscreen=yes/no/1/0 | 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。| | height=pixels | 窗口文档显示区的高度。以像素计。| | left=pixels | 窗口的 x 坐标。以像素计。| | location=yes/no/1/0 | 是否显示地址字段。默认是 yes。| | menubar=yes/no/1/0 | 是否显示菜单栏。默认是 yes。| | resizable=yes/no/1/0 | 窗口是否可调节尺寸。默认是 yes。| | scrollbars=yes/no/1/0 | 是否显示滚动条。默认是 yes。| | status=yes/no/1/0 | 是否添加状态栏。默认是 yes。| | titlebar=yes/no/1/0 | 是否显示标题栏。默认是 yes。| | toolbar=yes/no/1/0 | 是否显示浏览器的工具栏。默认是 yes。| | top=pixels | 窗口的 y 坐标。| | width=pixels | 窗口的文档显示区的宽度。以像素计。| ### 8.1.3 间歇调用和超时调用 JavaScript是**单线程**语言，但允许通过设置超时值和间歇时间值来调度代码在特定的时刻（**当前事件队列没有等待事件**）执行。 * 超时调用 `setTimeout(code,millisec)` 返回超时调用的数值ID | 参数| 描述| |---|---| | code| 必需。要调用的函数后要执行的 JavaScript 代码串。*常用匿名函数*| | millisec| 必需。在执行代码前需等待的毫秒数。| * 取消超时调用 `clearTimeout(timeoutId)` * 间歇调用 `setInterval(code,millisec)` 返回超时调用的数值ID | 参数| 描述| |---|---| | code| 必需。要调用的函数后要执行的 JavaScript 代码串。*常用匿名函数*| | millisec| 必需。周期性执行或调用 code 之间的时间间隔，以毫秒计。| * 取消超时调用 `claerInterval(intervalId)` 一般认为，使用超时调用来模拟间歇调用是一种最佳模式，在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动（基于js阻塞等原因）。 ### 8.1.4 系统对话框 浏览器通过`alert()、confirm()、prompt()`方法可以调用系统对话框向用户显示消息。这几个方法打开的对话框都是**同步和模态**的，也就是说，显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。 **confirm(message)** 如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。 在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。 **alert(message)** 用于显示带有一条指定消息和一个 OK 按钮的警告框。 **prompt(text,defaultText)** ||| |---|---| |text| 可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。| |defaultText| 可选。默认的输入文本。| 如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。 **print()** 用于打印当前窗口的内容。 调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮。通常，这会产生一个对话框，让用户可以取消或定制打印请求。