Javascript学习指南（第2版）笔记(五) 浏览器对象、cookie
1、window对象
2、同源安全策略
3、cookie
浏览器对象模型（BOM）是一组从浏览器上下文继承而来的对象，这也是绝大多数 JavaScript应用程序中函数运行的上下文。有时它也被称之为 DOM Level 0，或者就叫 DOM。
BOM是一组有限的公共 Web对象，也是一个层次化的对象集，每个层次上的对象都可以通过它们的父对象来访问，比如 window[navigator, location, frames, screen, history, document[forms, cookie, link/anchors, images, embeds/plug-ins, all]]。
访问对象时，你可以：
var theImage = document.form[0].elements["someelement"].value;
1、window对象
浏览器的 window对象封装了整个浏览器环境，包括 window的"chrome"（组成浏览器窗体的通用组件）、实际的 Web页面，以及页面中的事件。
通过 window可以手动设置浏览器状态条上的状态，执行打开一个新窗口、重新调整已显示窗口的大小、关闭窗口等操作。不过随着动态 Web效果和 Ajax的流行，这种弹出式窗口越来不被喜欢。
window对象的方法和属性可以分成4类：
a. 创建新窗口，维护现有窗口行为
弹出式对话框：alert、confirm和 prompt
创建自定义窗口：window.open()
维护窗口：通过窗口的引用能够完成该窗口的维护，要维护父窗口则使用关键字 opener，要维护包含当前运行脚本的窗口，则应该使用关键字 self。
b. 在窗口中创建带分区的文档（帧和iframes）
frame对象定义了以下元素：parent、length和 name。对于跨帧通信而言，name和 parent属性特别重要。其父元素 frameset（帧集，包括帧的窗口）可以通过每个帧的名字访问所有子帧（也可以通过帧数组，以对象数量作为索引值）；每个帧都可以通过通用的关键字 parent来访问该帧集。兄弟帧元素之间可以通过 parent和对方的 name属性来访问。
和标准的帧不一样，iframe是内嵌在页面中的。你可以为其指定高度和宽度，如果将它们都设置为0，那么它就将被隐藏起来。iframe会把它嵌入到的页面视为自己的父元素，这也是它和更高层页面进行通信的方法。通常，你可以使用 document的 getElementById方法来访问它，也可以使用 target属性载入其内容。
c. 定时器的创建和控制
有两类定时器：一类是一次性的，另一类是周期性使用的。两种定时器都能取消，一次性定时器方法只会被调用一次。
要想创建一个不重复触发的定时器，可以使用 setTimeout方法：
var tmOut = setTimeout("func", 5000, "param1", param2,,,,, paramn);
如果想清除这个定时器，可以使用 clearTimeout方法：
clearTimeout(tmOut);
如果你想周期性地使用这个定时器，那么应调用 setInterval方法：
var tmOut = setInterval("functionName", 5000);
同样，如果想暂停或取消这个周期性定时器，可以使用 clearInterval方法。如果你想实现一个周期性定时器，但又想在参数中指定一个函数文字量，那么你可以在每次定时器过期时再用 setTimeout函数重新设置这个定时器。
注：
在 IE浏览器中，setInterval和 setTimeout方法是不支持在最后添加函数调用所需参数的。
d. 用来控制浏览器其他元素
history对象
history对象负责维护浏览器中页面载入操作的历史记录。同样，其方法和属性能够完成通过浏览器的后退和前进按钮所能实现的导航操作。
screen对象
screen对象所包含的信息是屏幕显示有相关的，包括其宽度、高度，以及颜色或像素浓淡。虽然他们不是很常用，但他们对于那些需要修改浏览器窗口大小、创建需要特定调色板的带色彩对象等功能而言是不错的选择。
navigator对象
navigator对象中提供的是和浏览器或其他访问该页面的用户代理相关的信息。通过它可以检查操作系统、浏览器或浏览器族、安全策略、语言以及 cookie是否启用。
document对象
1.链接和锚
document对象的 links集合是由页面中所有超链接组成的，它的访问方法和数组一样。
2.图像
和链接一样，图像也有其对应的对象，也可以直接设置他们的属性，如表示图像 URL的 src属性。
3.innerHTML
使用 innerHTML属性可以修改页面中任何一个 HTML元素，它之所以仍然流行，是因为通过它修改页面元素时无需构建整个页面的内容，你只需创建一个 HTML格式的字符串，然后通过 innerHTML就可以添加到 Web页面中。不过，使用 innerHTML意味着无论向 Web页面添加了什么，他们都无法融合到页面的 document树上，因此如果你混合使用 innerHTML和新的 DOM方法将会带来很大的破坏。
2、同源安全策略
同源安全策略确保了不同域名、协议或端口的页面之间不能够通过脚本进行通信。同源安全策略将应用于不同页面之间的通信，包括父窗口中的表单和内嵌窗口之间的通信，如帧及 iframe。
3、cookie
cookie的意义就是一个带有过期时间、域名、路径的小型的键/值对，之所以需要提供这些消息，是为了确保正确的服务器能够读取到正确的 cookie。这些信息将作为 Web请求的一部分发送，因此在服务器端和浏览器都能访问这些数据。
设置、读取、删除 cookie
window.onload = function() {
if (navigator.cookieEnabled) {
var sum = readCookie("sum");
if (sum) {
var iSum = parseInt(sum) + 1;
alert("cookie count is " + iSum);
if (iSum > 5) {
eraseCookie("sum");
} else {
setCookie("sum", iSum);
}
} else {
alert("no cookie, setting now");
setCookie("sum", 0);
}
}
}
// 将 cookie有效期设置为 2016年
function setCookie(key, value) {
var cookieDate = new Date(2016, 11, 10, 19, 30, 30);
document.cookie = key + "=" + encodeURI(value) + "; expires=" + cookieDate.toGMTString() + "; path=/";
}
// 在每个 cookie之前用分号隔开
function readCookie(key) {
var cookie = document.cookie;
var first = cookie.indexOf(key + "=");
// 存在 cookie
if (first >= 0) {
var str = cookie.substring(first, cookie.length);
var last = str.indexOf(";");
// 如果是最后一个 cookie
if (last < 0) last = str.length;
// 获取 cookie的值
str = str.substring(0, last).split("=");
return decodeURI(str[1]);
} else {
return null;
}
}
// 将 cookie的有效期设置成过去，以达到删除 cookie的目的
function eraseCookie (key) {
var cookieDate = new Date(2000, 11, 10, 19, 30, 30);
document.cookie = key + "= ; expirse=" + cookieDate.toGMTString() + "; path/";
}
