JavaScript学习笔记（四）之浏览器对象

九、浏览器对象模型

BOM是一组从浏览器上下文中继承而来的对象。一下是BOM的层次结构

Window	document	forms
	navigator	cookie
	location	links/anchors
	frames	images
	screen	embeds/plug-ins
	history	all

在集合中访问某个项可以使用数组索引（document.image[0]），也可以使用其name属性（document.image("name")），第三种就是使用元素的id属性（document.getElementById("name")）

（一）window对象

window对象封装了整个浏览器环境，包括window的“chrome”（组成浏览器窗口的通用组件）、实际的web页面，以及页面中的事件。

        1.窗口的创建

alert("Hello?");             //只有一个参数且不返回任何值
var result = confirm("Do you like me?");    //一个问题，两个按钮。返回值由按钮决定
var response = prompt("Your name","....");  //两个参数（问题和文本框），返回值由按钮决定

这类窗口称为弹出窗口。更有效的方式是打开一个新窗口显示额外信息。

window.open("URL","name","width=600,height=400,.....");

window对象的open方法，可以打开一个新窗口，并且控制其内容、大小、位置等属性。具体如下：

alwaysLowered	将新窗口放在父窗口之下	默认值为no
alwaysRaised	打开一个位于父窗口顶部的窗口	默认值为no
dependent	打开一个依赖于父窗口的新窗口	默认值为no
directories	在浏览器上显示个人书签或连接工具栏	默认值为yes
height	内容区域的高度（像素）	最小值为100
width	内容区域的宽度（像素）	最小值为100
outerHeight	整个浏览器窗口的高度（像素）	最小值为100
outerWidth	整个浏览器窗口的宽度度（像素）	最小值为100
top	浏览器窗口最上方边缘的位置	必须在屏幕范围之内
left	浏览器窗口最左方边缘的位置	必须在屏幕范围之内
menubar	显示菜单栏	默认值为yes
toolbar	显示工具栏	默认值为yes
location	显示地址栏	默认值为yes
status	在浏览器窗口底部显示状态栏	默认值为yes
relizable	窗口大小可调	默认值为yes
scrollbars	带有滚动条	默认值为yes
modal	在返回主窗口之前，必须关闭所有打开窗口
dialog	打开一个对话框窗口
minimizable	添加最小化对话窗口
titlebar	呈现标题栏	默认值为on
close	呈现关闭按钮	默认值为on

在操纵窗口的方法中，其功能包括改变窗口的大小、焦点和位置：

newWindow.focus();             //使它获得焦点
newWindow.blur();              //是下一个窗口获得焦点
newWindow.resizeBy(50,50);     //相对于当前的修改量
opener.resizeTo(100,100);     //opener操纵父窗口，重新设置窗口的绝对宽度和高度
self.moveTo(x,y);             //self操纵当前运行脚本的窗口，将窗口左上角移到（x,y）坐标指定的位置上

（二）二层对象

        1.document对象

对表单及表单元素的访问权限：

document.getElementById();
document.getElementsByTagName();
document.writeln();

对页面中的链接和锚的访问权限：

链接是指定href属性，锚是指定thename属性。document对象的links集合是由页面中所有超文本链接组成的，它的访问方法和数组一样。

window.onload = function () {
	var links = "";
	for (var i = 0; i < document.links.length; i++) {
		links = links + document.links[i].href + "\n\n";
	}
	alert(links);
}

通过document对象访问links集合，然后通过alert提取每个链接的href属性。

对页面中的图像的访问权限：

和链接一样，图片也有其对应的对象，也可以直接设置它们的属性。

var pics = new Image();
pics.src = "someimage.png";

通过文档的images集合实现以幻灯片形式播放图片

var pics = new Array();
window.onload = function(){
	for (var i = 0; i < 5; i++) {
		pics[i] = new Image();
	}
	pics[0].src="1.png";
	pics[1].src="2.png";
	pics[2].src="3.png";
	pics[3].src="4.png";
	pics[4].src="5.png";

	document.getElementById("next").onclick = nextPic;
	document.getElementById("prev").onclick = prevPic;
}

innerHTML属性，可以修改页面元素中的任何HTML，而无需构建整个页面内容，只需创建一个HTML格式的字符串，然后通过innerHTML就可以把字符串添加到Web页面中。但无论向Web页面添加什么，都无法融合到页面的文档树上。

        2.navigator对象

navigator对象提供的是和浏览器用户代理相关的信息。

appCodeName	浏览器代码库的名称
appName	浏览器的名称
appMinorVersion	浏览器的副版本号
appVersion	浏览器的主版本号
cookieEnabled	cookie是否启用
mimeTypes	数组，用来保存浏览器支持的MINE类型
onLine	用户是否联机
platform	浏览器运行的平台
plugins	数组，用来保存浏览器所安装的插件
userAgent	针对浏览器的完整的用户代理描述
userLanguage	浏览器支持的语言

        3.location对象

location对象的属性都是与页面位置相关的。

parent.frame.location.replace("");      //替换其中一个框架的页面
parent.frame.location.reload("");       //使浏览器刷新文档

hash	URL中#后面的值
host	URL的主机名和端口号
hostname	仅主机名
href	完整的URL
pathname	域名之后的路径名
port	URL中的端口号
protocol	URL中使用的协议，如“http:”
search	查询字符串，如果存在则是从页面中派生的；它包含URL中第一个问号之后的内容
target	表示载入URL的目标元素名称

location对象属性中有两类定时器：

var tmOut = setTimeout(func,5000,param1,.....);
clearTimeout(tmOut);

一次性定时器方法只会触发一次，调用它时指定第一个参数是函数名称，第二个是以毫秒为单位的延迟时间。

var tmOut = setInterval(func,5000);
clearInterval(tmOut);

周期性的使用这个定时器倒计时，应调用setInterval方法。

        4.frames对象

<frameset cols="50%,*">
	<frame name="framea" src="framea.html">
	<frame name="frameb" src="frameb.html">
</frameset>

frame对象定义了属性：parent、length和name。父元素frameset通过框架的名字访问所有子框架；每个框架通过parent还访问frameset；同级的框架元素通过parent和对方的name属性来访问。

基于iframe的远程脚本

iframe是内嵌在页面中的，可以指定高度和宽度。如果将高度和宽度设置为0，则可以隐藏iframe。可以使用document的getElementById方法访问它，也可以使用target属性向其中载入内容。

基于远程脚本，客户端页面能够访问服务器端的远程服务，并将结果数据返回客户端，而且无需重载客户端。现在这一功能称为Ajax，绝大多数远程脚本都被改成通过一个特定对象来管理。

<iframe 
 name="myFrame"
 id="myFrame" 
 style="width:0;height:0;border:0" 
 src="service.php">
</iframe>

将Ajax应用程序的状态及时保存为一项历史记录，然后更新iframe，传入一个值表示状态。可以从iframe中获取其状态值，得到缓存状态，以便恢复相应的页面。

        5.screen对象

screen对象包含的信息是与显示器屏幕有关的。属性会随版本的改变而改变。至少支持以下功能：

availTop（top）	窗口可以放置的最顶部位置（以像素表示）
availLeft（left）	窗口可以放置的最左边位置（以像素表示）
availWidth（width）	屏幕的宽度（单位为像素）
availHeight（height）	屏幕的高度（单位为像素）
colorDepth	屏幕的颜色深度
pixelDepth	像素的位元深度

        6.history对象

history对象负责维护浏览器中页面载入操作的历史记录。属性（next、previous）或方法（back、forward）遍历历史记录。用current可以找到当前页面并获得history的长度。用go方法可以跳转到指定的页面。只有当使用Ajax页面效果时，history对象才成为需要关心的对象。

十、客户端存储技术

（一）cookie

cookie就是一个小型键/值对，它与过期日期和域名/路径相关联。这些信息作为Web请求的一部分传输，因此服务器端和浏览器都能够访问这些数据。

document.cookie = "cookieName = cookieValue; expires = date; path = path";

通常在命名cookie时会以“$”或“_”为前缀，过期日期是一个重要部分，如果没有提供日期，那么会认为该cookie只用于当前会话，当浏览器会话结束时就会删除它。将cookie的有效日期设置为过去，以达到删除cookie的目的。cookie是个便捷的小工具，但只能存储20个cookie且总容量不能大于4KB。

（二）Flash共享对象、Google Gears和HTML5 DOM

为了存储更大的cookie或更复杂的对象，出现了一些新方法，但是没有跨所有浏览器实现。