Window

BOM的核心对象是window，其表示浏览器的一个实例。在浏览器中，window既作为JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

全局作用域

作为Global对象角色。

1.在全局作用域中定义的变量，函数等，都自动归在window对象名下。

var age = 29;
function sayAge() {
  alert(this.age);
}

alert(window.age);
sayAge();
window.sayAge();

2.在window上定义的属性可以被delete，而全局变量不能被delete；

var age = 29;
window.color = "red"

delete window.age;//false

delete window.color;//true

窗口关系及框架

框架：Frame

1.若页面中包含框架，则每个框架都拥有自己的window对象，且保存在frames集合中。 在frames集合中，可以通过数值索引（从0开始）或者框架名称来访问相应的window对象。

window.frames[0]
window.frames["topFrame"]
frames[0]
frames["topFrame"]

另外，还有一个top对象，用来指向最高层的框架，也就是浏览器窗口。使用它可以确保一个框架中正确而访问另一个框架。

而与top相对的另一个window对象是parent。就是当前框架的父框架。嗯。

窗口位置

screenLeft，screenTop；screenX，screenY

IE、Safari、Opera、Chrome提供screenLeft、screenTop
Firefox提供screenX、screenY。
故，需要用到窗口位置的值时，需要如此调用：

1
2
3

var leftPos (typeof window.screenLeft == "number") ? window.screenLeft: window.screenX;

var topPos (typeof window.screenTop == "number") ? window.screenTop: window.screenY;

IE、Opera、Chrome存储的是从左边和上边到由window对象表示的页面可见区域的距离。
而Firefox、Safari中存储的是浏览器窗口相对于整个屏幕的坐标值。

移动窗口

moveTo()，moveBy()可以将窗口精确移动到一个新的位置。

窗口大小

IE9+、Firefox、Safari、Opera、Chrome提供了innerWidth、innerHeight、outerWidth、outerHeight。

在IE9+、Firefox、Safari中，outerWidth、outerHeight返回浏览器窗口本身的尺寸， 无论是从最外层的对象还是从某个框架访问，都是窗口本身的大小。

而Opera的outerWidth、outerHeight表示页面视图区域的大小
而innerWidth和innerHeight表示该容器中页面试图去的大小（减去边框）。

Chrome中的outerWidth、outerHeight返回相同的值，表示视图大小

IE、Firefox、Safari、Opera、Chrome都提供了document.documentElement.clientWidth和document.documentElement.clientHeight保存页面窗口的信息。而这些属性在IE6中，只有在标准模式下才生效。故需要通过document.body.clientWidth和document.body.clientHeight获取。

故，需要取得页面视口的大小需要这样操作：

var pageWidth = window.innerWidth, pageHeight = window.innerHeight;
if(typeof pageWidth != "number") {
  if(document,compatMode == "CSS1Compat") { //判断是否处在标准模式
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
  } else {
    pageWidth = document.body.clientWidth;
    pageHeight = document.body.clientHeight;
  }
}

resizeTo()和resizeBy()可以调整浏览器窗口大小。

导航和打开窗口

使用window.open()方法可以导航到一个特定的url，也可以打开一个新的浏览器窗口。这个方法接收：要加载的url、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

第二个参数一般是框架，或者：_self、_parent、_top、_blank： 若给window.open()传递的第二个参数不是已经存在的窗口或框架，则该方法会根据在第三个参数传入的字符串创建一个新窗口或者新标签页。若没有传入第三个参数，则打开一个带有全部默认设置的新窗口。

第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都有哪些特性

fullscreen: yes/no 表示浏览器窗口是否最大化，仅限IE
height 数值表示新窗口的高度，不小于100
left 数值表示新窗口的左坐标，不能为负值
location yes/no 表示是否在浏览器显示地址栏
menubar yes/no 表示是否在浏览器中显示菜单
resizable yes/no 表示是否可以通过拖动浏览器的边框改变其大小
scrollbars yes/no 表示若内容在视口中显示不下，是否允许滚动
status yes/no 表示是否在浏览器中显示状态栏
toolbar yes/no 表示是否在浏览器中显示工具栏
top 数值表示新窗口的上坐标，不能为复制
width 数值表示新窗口的宽度，不小于100

间歇调用和超时调用

js是单线程语言，但允许设置超时值和间歇时间值来调度代码在特定的时刻执行。设置超时值，是在指定时间过后执行代码，而设置间歇时间值则是每隔一段时间执行一次代码。

超时，需要调用window的setTimeout()方法： 接收两个参数，要执行的代码和时间。

setTimeout("alert('Hello world!')", 1000);

setTimeout(function(){
  alert('hello world!')
}, 1000)

setTimeout()方法会返回一个超时调用id，该id可以被用来取消尚未执行的超市调用方法。

1	clearTimeout(id)

间歇调用，需要使用setInterval方法

setInterval("alert('Hello world!')", 1000);

setInterval(function(){
  alert('hello world!')
}, 1000)

间歇调用也返回一个间歇调用id，使用方法同演示调用嗯。

系统对话框

浏览器通过alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息。其外观由系统及浏览器设置决定。

这个感觉比较简单，略过不写了。

location对象

location提供了与当前窗口中加载的文档相关的信息，且提供了一些导航功能。

location既是window对象的属性，又是document对象的属性。

location的属性如下：

hash “#contents” 返回URL中的hash，如果URL中不包含hash则返回空字符转
host www.wrox.com:80 返回服务器名称和端口号
hostname www.wrox.com 返回服务器名称
href http://www.wrox.com 返回加载页面的完整URL
pathname “/wileyCDA” 返回URL中的目录和文件名
port “8080” 返回端口号
protocal “http:” 返回协议
search “?p=javascript” 返回URL查询的字符串

查询字符串参数

location.search返回url中从问号到url末尾的所有内容。

位置操作

location可以通过多种方式改变浏览器的位置。

1.assign()方法： 该方法可以立即打开新url，并且在浏览器的历史记录中生成一条记录。

location.assign("http://www.wrox.com");

// 同以下两种方式
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

2.replace()方法： 不会在历史记录中生成一条记录

3.reload()方法： 重新加载当前显示的页面。如果调用reload()时不传递任何参数，页面就会以最有效的方式重新加载。

navigator对象

navigator对象用于识别客户端浏览器的事实标准。其属性如下：

appCodeName 浏览器的名称，通常是Mozilla
appMinorVersion 此版本信息
appName 完整的浏览器名称
appVersion 浏览器的版本。
buildID 浏览器编译版本
cookieEnabled 是否启用cookie
cpuClass 客户端计算机中使用的CPU类型
javaEnabled() 浏览器中是否启用了java
lauguage 浏览器的主语言
mimeTypes 在浏览器中注册的MIME类型数组
onLine 是否连接到因特网
oscpu 客户端计算机的操作系统或使用的cpu
Platform 浏览器所在的系统平台
plugins 浏览器中安装的插件信息的数组
preference() 设置用户的首选项
product 产品名称
productSub 关于产品的次要信息
registerContentHandler() 针对特定的协议将第一个站点注册为处理程序
systemLanguage 操作系统的语言
useraAgent 浏览器的用户代理字符串
userLanguage 操作系统的默认语言
userProfile 借以访问用户个人信息的对象
wendor 浏览器的品牌
vendorSub 有关供应商的次要信息

检测插件

使用plugins数组检查插件。

该数组每一项都包含：name、description、filename、length。
length指的是插件所处理的MIME类型数量。

注册处理程序

Firefox2为navigator对象新增了registerContentHandler()和registerProtocolHandler()方法。用于让一个站点指明它可以处理特定类型的信息。

screen对象

一个对撸码没什么用的对象，多用于表示浏览器的能力（宽高、颜色位数等）。啊，就不提了。

history对象

用于保存用户上网的历史记录。对于每个浏览器窗口、每个标签页、每个框架，都有其自己的history对象与特定的window相关联。

使用history的go()、back()、forward()方法可以使页面前进或后退

JavaScript——BOM