Javascript BOM
浏览器对象模型BOM（Browser Object Model），当前窗口是对象树的顶层。下面的对象包括： window,navigator,frames[],document,history,location,screen
1.navigator对象
navigator对象包含描述浏览器的属性和方法。可以用作浏览器的检测（基本属性，插件，MIME类型等）
navigator对象的属性：
appCodeName：浏览器编码名
aooName：浏览器名
appVersion：浏览器版本
mineTypes：浏览器支持的MIME类型数组
platform：运行浏览器的操作系统
userAgent：http代理
示例：在浏览器显示navigator每个属性和属性值
<script type="text/javascript">
for (var i in navigator) {
document.write(i + " <em>" + navigator[i] + "</em><br/>");
}
</script>
2.window对象
winodw对象处于javascript结构的最顶层，对于每个打开的窗口，系统都会自动为其定义window对象。
window对象的常用属性：
document：窗口中当前显示的文档对象（标签页）
frames：窗口中的框架对象数组
history：窗口最近加载的url
length：窗口中的框架数
location：当前窗口的url
self：当前窗口（等同于window）
opener：打开当前窗口的窗口
parent：指向包含另一个窗口的窗口（由框架使用）
screen：屏幕的相关信息
top：包含特定窗口的最顶层窗口（由框架使用）
window对象的常用方法：
alert(text),blur(),focus()
open(url, name, [options]) 打开新窗口返回新window对象
open示例：
<body>
<script type="text/javascript">
function newWindow() {
var windowObj = open("http://www.google.com", "google");
}
</script>
<a href="JavaScript:newWindow()">打开网页</a>
</body>
点击超链接打开google
open方法的一些选项：弹出窗口可以根据需要设置参数，参数用逗号隔开
height，width：高宽 int值
location：地址栏 yes/no或者1/0
resizable调整大小 yes/no或者1/0
toolbar：工具栏 yes/no或者1/0
scrollbars：滚动条 yes/no或者1/0
status：状态栏 yes/no或者1/0
menubar：菜单栏 yes/no或者1/0
修改一下上面的例子
<body>
<script type="text/javascript">
function newWindow() {
var windowObj = open("http://www.google.com", "google","height=1100,width=1000,resizable=yes,scrollbars=no,location=no,status=no,menubar=no");
}
</script>
<a href="JavaScript:newWindow()">打开网页</a>
</body>
这样会出来一个比较“纯净”的窗口
3.frames对象
html中的框架在js中用frames对象数组表示。frames[]数组是window对象的一个属性，并被窗口的parent属性所引用。
window.parent.frames[x]表示第x个框架。
示例：导航栏操作，效果：点击左边导航的超链接改变右边框架的背景色
parent页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<frameset cols="25%,75%">
<frame src="leftmenu.html" name="lframe">
<frame src="rightcolor.html" name="rframe">
</frameset>
</html>
leftmenu.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<script type="text/javascript">
function setBgColor(color) {
parent.frames[1].document.bgColor=color;
}
</script>
</head>
<body bgColor="white">
<h3>
Pick a color:
<br/>
<a href="JavaScript:setBgColor('red')">red</a><br/>
<a href="JavaScript:setBgColor('yellow')">yellow</a><br/>
<a href="JavaScript:setBgColor('green')">green</a><br/>
<a href="JavaScript:setBgColor('blue')">blue</a>
</h3>
</body>
</html>
rightcolor.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
</body>
</html>
4.location对象
location代表当前加载文档的URL。
hash：如果该部分存在，表示锚(anchor)
host：主机名：端口
hostname：主机名
href：整个url
pathname：路径名
port：端口号
protocol：协议
search：查询字符串
location对象的方法：
reload()：重新加载当前url
replace()：用新的url替换当前页面，与href的不同是，href会将新页面置于历史列表的顶部，replace删除当前页面在历史列表中的记录后替换
watch()：在location属性上设置一个监视点，在属性改变时调用某函数
unwatch()：移除监视点
location示例：收缩导航栏
先修改一下上面的例子，让导航栏的超链接指向不同的网站
修改leftmenu.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<script type="text/javascript">
function openSite(url) {
parent.frames[1].location=url;
}
</script>
</head>
<body bgColor="white">
<h3>
Pick a site:
<br/>
<a href="JavaScript:openSite('http://www.baidu.com')">baidu</a><br/>
<a href="JavaScript:openSite('http://www.hupu.com')">hupu</a><br/>
<a href="JavaScript:openSite('http://www.163.com')">163</a><br/>
</h3>
</body>
</html>进入parent页面，效果如图：
我们可以发现，如果想把右边框架的网页加入收藏夹是不可以的，只能把整个parent页面加入收藏夹，要解决这个问题，可以让选中的网址加载到父窗口的位置。
把openSite方法改为：
function openSite(url) {
parent.location=url;
}效果：点击了超链接导航整个页面变成选择的页面，按返回按钮回到导航页面。
5.history对象
history在栈中保存了用户访问页面的记录。
属性“
curent：当前页面的url
length：history对象中的记录数
next：history对象中下一个页面的url，如果是新打开的页面，则next为空
previous：history对象中前一个页面的url，如果是第一次打开的页面，则previous为空
方法：
back() ：返回前一个url，作用相当于浏览器的后退按钮
forward()：下一个url，作用相当于浏览器的前进按钮
go()：向前或者向后移动指定个数页面
示例：
history.go(-3) //后退3个页面 history.go(1) //前进1个页面 forward() //等同于history.go(1) back() //等同于history.go(-1)
6.screen对象
screen对象提供了屏幕的属性。
常用属性：
width：像素值表示的屏幕宽度
height：像素值表示的屏幕高度
availHeight：height减去工具栏之类的高度
availWidth：同width