BOM知识简易总结

BOM知识总结

在web中使用JavaScript，BOM（浏览器对象模型）是其核心

window对象

JavaScript的所有对象都存在于一个运行环境之中，这个运行环境本身也是对象，称为“顶层对象”。
这就是说，JavaScript的所有对象，都是“顶层对象”的下属。不同的运行环境有不同的“顶层对象”，在浏览器环境中，这个顶层对象就是window对象。

全局作用域

window对象同时扮演ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以。

窗口的大小和位置

位置

IE、Safari、Opera、Chrome都提供了 screenLeft和screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox则在screenX和screenY属性中提供相同的窗口位置信息（Safari和Chrome也同样支持）。

大小

1. window.innerHeight和window.innerWidth
   返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport），单位为像素。当用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。因为这时网页的像素大小不变，只是每个像素占据的屏幕空间变大了，因为可见部分（视口）就变小了。注意，这两个属性值包括滚动条的高度和宽度。

2. window.outerHeight和window.outerWidth
   返回浏览器窗口的高度和宽度，包括浏览器菜单和边框，单位为像素。

计时器

JS是单线程语言，但它允许通过设置超时值和间歇时间来调度代码在特定的时刻执行。

setInterval

window对象的setInterval方法用来实现一个函数在指定毫秒数的间隔里重复调用。setInterval返回一个值，这个值可以传递给clearInterval用于取消这个函数的执行。

var num = 0,
    max = 10,
    intervalId;
function incrementNumber() {
    num ++;
    if (num == max){
        clearInterval(intervalId);
        alert('ok');
    }
}
intervalId = setInterval(incrementNumber,500);

setTimeout

window对象的setTimeout方法用来实现一个函数在指定的毫秒数之后运行。setTimeout返回一个值，这个值可以传递给clearTimeout用于取消这个函数的执行。

var num = 0,
    max = 10;
function incrementNumber() {
    num ++;
    if (num < max){
        setTimeout(incrementNumber,500);
    } else {
        alert('ok');
    }
}
setTimeout(incrementNumber,500);

如果以0毫秒的超时时间来调用setTimeout ( ) ，那么指定的函数不会立即执行。相反，会把它放到队列中，等到前面处于等待状态的事件处理程序全部执行完毕后，再“立即”调用它。

frame

window.frames属性返回一个类似数组的对象，成员为页面内所有框架窗口，包括frame元素和iframe元素。window.frames[0]表示页面中第一个框架窗口，window.frames['someName']则是根据框架窗口的name属性的值（不是id属性），返回该窗口。

传统的frame已被废弃，由<iframe>所创建的嵌套浏览上下文是用它自己的Window对象所表示的。

var iframe = window.getElementsByTagName('iframe')[0];
var iframe_title = iframe.contentWindow.title;

导航和弹出窗口

window.open ( ) 方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。

这个方法接受四个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

例如：

var popup = window.open(
  'somepage.html',
  'DefinitionsWindows',
  'height=200,width=200,location=no,resizable=yes,scrollbars=yes'
);

• window.close方法用于关闭当前窗口，一般用来关闭window.open方法新建的窗口。

• window.closed属性用于检查当前窗口是否被关闭了。

• 新创建的window对象有一个opener属性，其中保存着打开它的原始窗口对象

系统对话框

浏览器通过alert ( ) 、confirm ( ) 、prompt ( ) 方法可以调用系统对话框向用户显示消息。系统对话框与在浏览器中显示的网页没有关系，也不包含HTML。它们的外观由操作系统及浏览器设置决定，而不是由css决定。

这几个方法打开的对话框都是同步和模态的。显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。

1. alert ( ) 这个方法弹出的对话框，只有一个“确定”按钮，往往用来通知用户某些信息。

2. confirm ( ) 会显示确认与取消按钮，两个按钮可以让用户决定是否执行给定的操作

3. prompt ( ) 用于提示用户输入一些文本

URL的解码/编码方法

• decodeURI()

• decodeURIComponent()

• encodeURI()

• encodeURIComponent()

Location对象

Location对象是一个很特别的对象，它既是window对象的属性，也是document对象的属性；换句话说window.location和document.location引用的是用一个对象。

window.location === document.location

location对象的用处不只是表现在它保存着当前文档的信息，还表现在它将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。

属性名	例子	说明
hash	'#contents'	返回URL中的hash(#号后跟零或多个字符)，如果URL中不包含散列，则返回空字符串
host	'www.jikexueyuan.com:80'	返回服务器名称和端口号
hostname	'www.jikexueyuan.com'	返回不带端口号的服务器名称
href	'http:// www.jikexueyuan.com'	返回当前加载页面的完整URL。而Location对象的toString()方法也返回这个值
pathname	'/my/'	返回URL中的目录和文件名
port	'8080'	返回URL中制定的端口号。如果URL中不包含端口号，则这个属性返回空字符串
protocol	'http:'	返回页面使用的协议。通常是http:或https:
search	'?q=javascript'	返回URL的查询字符串。这个字符串以问好开头

尽管location.search返回从问好到URL末尾的所有内容，但却没有办法逐个访问其中的每个查询字符串参数。可以才用decodeURIComponent来解析

如果调用reload ( ) 时不传入任何参数，页面就会以最有效的方式重新加载。

History对象

浏览器窗口有一个history对象，用来保存浏览历史，从窗口被打开的那一刻算起。history是window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
history对象提供了一系列方法，允许在浏览历史之间移动。

• back ( ) ：移动到上一个访问页面，等同于浏览器的后退键。

• forward()：移动到下一个访问页面，等同于浏览器的前进键。

• go ( ) ：接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()。

history对象有一个length属性，保存着历史记录的数量。
HTML5为history提供了两个新方法，history.pushState ( ) 和history.replaceState ( ) ，用来在浏览器历史中添加和修改记录。所有主流浏览器都支持该方法（包括IE10）。
它们接受三个参数，依次为:

• state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。

• title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。

• url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

它的state属性保存当前页面的state对象

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "2.html");
history.state
// { foo: "bar" }

Navigator对象与Screen对象

• Window对象的navigator属性，指向一个包含浏览器相关信息的对象。

• window.screen对象包含了显示设备的信息。screen.height和screen.width两个属性，一般用来了解设备的分辨率。