这篇博客我们来学习一下BOM，BOM即是Browser Ojbect Model，浏览器对象模型,通过操作BOM可以对浏览器本身进行一些操作，例如窗口大小、窗口定位、框架控制、状态栏控制、导航控制等，虽然BOM还没有规范化，但是主流浏览器都支持BOM。
浏览器对象
BOM对象
说明
Window
JavaScript顶级对象，当<body和<frameset>标签出现时，Window对象就会被创建
Navigator
包含客户端浏览器的信息数据
Screen
包含客户端浏览器显示信息
History
包含客户端浏览器访问过的URL
Location
包含当前URL的信息
Document
包含HTML文档，可以访问页面中所有元素
层次关系
Window对象
属性
属性
描述
closed
当前窗口的关闭打开状态
status
窗口状态栏的文本内容
defaultStatus
窗口状态栏中的默认文本
innerheight
innerwidth
文档显示区的高度和宽度
length
窗口中的框架数量
name
设置或返回窗口的名称
opener
返回对创建此窗口的窗口的引用
outerheight
outerwidth
返回窗口的外部高度和宽度
pageXOffset
pageYOffset
当前页面相对于窗口显示区左上角的 X和Y位置
parent
返回父窗口
self
返回对当前窗口的引用，与window属性相同
top
如果当前窗口是框架，top是框架的顶级窗口Window对象引用；嵌套框架中top不是parent
screenLeft
screenTop
screenX
screenY
声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。
方法
方法
描述
alert()、confirm()、
prompt()
提供交互方式，分别为弹出、确认、输入
blur()、focus()
放弃、得到窗口的键盘焦点
clearInterval()setInterval()
取消、设置按照指定的周期（以毫秒计）来调用函数或计算表达式
clearTimeout()、
setTimeout()
取消、设置在指定的毫秒数后调用函数或计算表达式
open()、close()
打开、关闭浏览器窗口
createPopup()
创建一个 pop-up 窗口
moveBy()、moveTo()
移动窗口
print()
打印当前窗口的内容
resizeBy()、resizeTo()
按照指定的像素调整窗口的大小
scrollBy()、scrollTo()
滚动窗口中的文档
作用域和生命周期
<script type="text/javascript">
var a="全局变量";
function f()
{
alert(window.a);
}
window.f();
</script>
与其他对象不同，Window对象存在于浏览器进程中，如果浏览器进程没有终止，Window对象会一直存在于内存中。
框架与窗口
<html>
<head>
<title></title>
<script type="text/javascript">
var newWindow;
function createWindow()
{
newWindow=window.open("http://blog.csdn.net/lidaasky","test",false);
}
function alertWindow()
{
alert(newWindow.name);
}
</script>
</head>
<body>
<input type="button" value="Create a Window" οnclick="createWindow();" />
<input type="button" value="Check the Window" οnclick="alertWindow();" />
</body>
</html>
Navigator对象
属性
属性
说明
appName
浏览器名称
appVersion
浏览器版本号
userAgent
在它的USER-AGENT HTTP标题中发送的字符串，包含appName和appVersion所有信息
appCode
浏览器代码名，当前浏览器使用的Mozilla
platForm
客户端浏览器所在操作系统
示例
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var nv=window.navigator;
function createWindow()
{
newWindow=window.open("http://blog.csdn.net/lidaasky","test",false);
}
function showInfo()
{
alert(
"浏览器名称："+nv.appName +
"\n版本号为："+nv.appVersion+
"\客户端："+nv.userAgent+
"\n浏览器代码："+nv.appCodeName+
"\n当前操作系统："+nv.platform);
}
</script>
</head>
<body>
<input type="button" value="Create a Window" οnclick="showInfo();" />
</body>
</html>
前者为IE8浏览器，后者为Chrome浏览器。
Location和History
Location属性
使用示例测试属性：
属性
说明
href
设置或读取文档的完整URL
protocol
URL协议部分，包括":"
host
主机名和端口号
hostname
主机名
port
端口号
pathname
URL中的路径部分
search
URL中的参数部分，包括"?"
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var wl=window.location;
function showInfo()
{
alert(
"href："+wl.href +
"\n协议："+wl.protocol+
"\n主机名和端口："+wl.host+
"\n主机名："+wl.hostname+
"\n端口："+wl.port+
"\n路径："+wl.pathName+
"\n参数："+wl.search+
"\n锚："+wl.hash);
}
</script>
</head>
<body>
<form>
<input type="submit" value="showProperties" οnclick="showInfo();" />
<input type="text" name="name" value="world" />
</form>
</body>
</html>http://192.168.24.158:8080/MyDRP1.4/location.html?name=world
Location方法
第一个方法不做过多说明。第二个方法，因为不会创建历史记录，所以没有返回项，这点比较常用，例如上次我们开发的考试系统，当时使用的全局焦点时禁用backspace，实现起来也比这个复杂，它很适合显示临时网页。
方法
说明
reload()
重新加载当前文档
replace()
新建文档，但不会创建历史记录
History对象
可以使用以下代码测试：
方法
说明
back()
返回前一个url
forward()
访问下一个url
go()
以当前页为参考，如果go(-n)，表示back()n次；如果go(n),表示forward()n次；go(0)表示刷新页面。
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var wh=window.history;
function visitPage(url)
{
window.location.href=url;
}
function goBack()
{
wh.back();
}
function goForward()
{
wh.forward();
}
function refreshPage()
{
wh.go(0);
}
</script>
</head>
<body>
<input type="button" value="访问百度" οnclick="visitPage('http://www.baidu.com');" /></br>
<input type="button" value="后退" οnclick="goBack();" /></br>
<input type="button" value="前进" οnclick="goForward();" /></br>
<input type="button" value="刷新" οnclick="refreshPage();" /></br>
</body>Screen对象
screen存储了客户的电脑屏幕信息和硬件配置，使用较少，使用到时知道有这些即可，下面是screen的属性：
属性
说明
availHeight
浏览器可用高度，不含系统任务栏
availWidth
浏览器可用宽度，不含系统任务栏
availLeft
屏幕最左的x坐标
availTop
屏幕最顶y坐标
colorDepth
浏览器分配颜色和深度
height
浏览器的屏幕高度
width
浏览器的屏幕宽度
pixelDepth
浏览器的屏幕颜色和深度
我们用一个例子展示一下各个属性的作用：
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var ws=window.screen;
function showInfo()
{
alert(
"浏览器可用屏幕高度："+ws.availHeight +
"\n浏览器可用屏幕宽度："+ws.availWidth+
"\n屏幕最左的x坐标："+ws.availLeft+
"\n屏幕最顶y坐标："+ws.availTop+
"\n浏览器分配颜色和深度："+ws.colorDepth+
"\n浏览器的屏幕高度："+ws.height+
"\n浏览器的屏幕宽度："+ws.width+
"\n浏览器的屏幕颜色和深度："+ws.pixelDepth);
}
</script>
</head>
<body>
<input type="button" value="showProperties" οnclick="showInfo();" />
</body>
</html>
Document对象
方法
close()
关闭open方法打开的文档
open()
产生一个新文档，覆盖已有文档
write()
把文本附加到当前文档
writeln()
与write方法的区别是末尾添加换行符
属性
alinkColor
点击的链接颜色，对应<body>alink属性
linkColor
未被访问链接颜色，对应<body>link属性
vlinkColor
被访问链接颜色，对应<body>vlink属性
anchors[]
Anchor对象数组，代表文档中的锚
applets[]
Applet对象数组，代表文档中的Java程序
images[]
Image对象数组，代表文档中的img元素
forms[]
Form对象数组，代表文档中的form元素
links[]
Link对象数组，代表文档中的超链接
bgcolor
文档背景颜色，对应<body>bgcolor属性
fgcolor
文档前景颜色，对应<body>text属性
cookie
允许JavaScript读写HTTP cookie信息
domian
文档的安全域
lastModify
文档的修改日期
location
等同于URL，使用较少
referrer
当前文档的URL
title
title元素，标题信息
URL
返回或设置文档URL，除非发生重定向，否则和window.location.href相同
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
