深入JavaScript（四）之BOM

来源：互联网发布：2016美国历月非农数据编辑：程序博客网时间：2024/05/18 02:25

本文转载自：http://blog.csdn.net/lidatgb/article/details/8684334

这篇博客我们来学习一下BOM，BOM即是Browser Ojbect Model，浏览器对象模型,通过操作BOM可以对浏览器本身进行一些操作，例如窗口大小、窗口定位、框架控制、状态栏控制、导航控制等，虽然BOM还没有规范化，但是主流浏览器都支持BOM。

浏览器对象

浏览器核心对象及其作用如下所示：

BOM对象
说明
Window
JavaScript顶级对象，当<body和<frameset>标签出现时，Window对象就会被创建
Navigator
包含客户端浏览器的信息数据
Screen
包含客户端浏览器显示信息
History
包含客户端浏览器访问过的URL
Location
包含当前URL的信息
Document
包含HTML文档，可以访问页面中所有元素

层次关系

Window对象是JavaScript的第一类对象，其它所有对象都是它的子对象，JavaScript中，所有对象都是作为Window对象的属性进行引用的，他们之间存在一种结构层次关系，Window对象代表了根节点，它们的层次关系如下所示：

Window对象

Window对象是JavaScript中的全局对象，JavaScript程序即是在Window对象提供的全局空间中运行，一个Window对象实际上就是独立的浏览器窗口，每个框架也包含一个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 坐标。

上面提到的6个属性对象没写到里面，下面会仔细介绍这6个对象。

方法

方法
描述
alert()、confirm()、
prompt()
提供交互方式，分别为弹出、确认、输入
blur()、focus()
放弃、得到窗口的键盘焦点
clearInterval()setInterval()
取消、设置按照指定的周期（以毫秒计）来调用函数或计算表达式
clearTimeout()、
setTimeout()
取消、设置在指定的毫秒数后调用函数或计算表达式
open()、close()
打开、关闭浏览器窗口
createPopup()
创建一个 pop-up 窗口
moveBy()、moveTo()
移动窗口
print()
打印当前窗口的内容
resizeBy()、resizeTo()
按照指定的像素调整窗口的大小
scrollBy()、scrollTo()
滚动窗口中的文档

上面已经提到，因为Window对象是全局对象，不用特殊说明，所以使用方法时，直接使用即可。例如需要调用alert()，只需要写alert()即可，不需要写Window.alert()；其它对象属性也是如此，例如使用document，不必使用Window.document。

作用域和生命周期

上面提到，Window对象是全局对象,同样Window对象的作用域也是全局作用域，实际上代表的就是一个浏览器窗口或是窗口中的一个框架。在客户端JavaScript中，顶层窗口和框架本质上是等价的，都对应一个Window对象，都提供了一个Javascript代码执行环境，窗口和框架的区别会在稍后说明。

因为Window对象是全局对象，所以其他所有全局变量都成为Window的属性，例如：

[javascript] view plaincopyprint?
<script type="text/javascript">  
    var a="全局变量";  
    function f()  
    {  
        alert(window.a);  
    }  
    window.f();  
</script>  

执行结果：

与其他对象不同，Window对象存在于浏览器进程中，如果浏览器进程没有终止，Window对象会一直存在于内存中。

框架与窗口

上面提到在JavaScript中，框架和窗口本质相同，但是不完全相同：框架不能单独存在，窗口可以包含多个框架，框架不能不能包含多个窗口。但JavaScript会把它们视为平等的Window对象，框架或窗口都有自己的全局作用域，相互之间不能随意访问，例如：

[html] view plaincopyprint?
<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" onclick="createWindow();" />  
        <input type="button" value="Check the Window" onclick="alertWindow();" />  
    </body>  
</html>  

IE和Chrome下都能访问的到我的博客。

但是都不能访问到新窗口的name属性：

但是同一个窗口下的框架之间却可以通过Window对象的frames、parent、top访问其他框架。

Navigator对象

属性

属性
说明
appName
浏览器名称
appVersion
浏览器版本号
userAgent
在它的USER-AGENT HTTP标题中发送的字符串，包含appName和appVersion所有信息
appCode
浏览器代码名，当前浏览器使用的Mozilla
platForm
客户端浏览器所在操作系统

示例

我们用一个示例来说明Navigator各个属性的作用：

[html] view plaincopyprint?
<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" onclick="showInfo();" />  
    </body>  
</html>  

运行结果：

前者为IE8浏览器，后者为Chrome浏览器。

Location和History

之所以把这两个对象放到一起，是因为它俩的作用都是定位。

Location属性

同样使用表格方式说明属性：

属性
说明
href
设置或读取文档的完整URL
protocol
URL协议部分，包括":"
host
主机名和端口号
hostname
主机名
port
端口号
pathname
URL中的路径部分
search
URL中的参数部分，包括"?"
使用示例测试属性：

[html] view plaincopyprint?
<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" onclick="showInfo();" />  
        <input type="text" name="name" value="world" />  
    </form>  
    </body>  
</html>  

运行结果

为了显示更多信息，我放到了Tomcat下访问,url为：

[plain] view plaincopyprint?
http://192.168.24.158:8080/MyDRP1.4/location.html?name=world  

运行结果为：

当然这只是最基础的属性，我们可以使用这些属性做到很多事，比如获取url中的键值对，获取文件扩展名等等。

Location方法

除了常用的属性，Location对象还有两个方法：

方法
说明
reload()
重新加载当前文档
replace()
新建文档，但不会创建历史记录

第一个方法不做过多说明。第二个方法，因为不会创建历史记录，所以没有返回项，这点比较常用，例如上次我们开发的考试系统，当时使用的全局焦点时禁用backspace，实现起来也比这个复杂，它很适合显示临时网页。

History对象

History对象用于表示浏览器的浏览历史，存储有限个URL列表。由于访问历史涉及到用户的隐私，所以history禁止JavaScript读取列表信息，只能通过方法去定位地址，例如：

方法
说明
back()
返回前一个url
forward()
访问下一个url
go()
以当前页为参考，如果go(-n)，表示back()n次；如果go(n),表示forward()n次；go(0)表示刷新页面。

可以使用以下代码测试：

[html] view plaincopyprint?
<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="访问百度" onclick="visitPage('http://www.baidu.com');" /></br>  
        <input type="button" value="后退" onclick="goBack();" /></br>  
        <input type="button" value="前进" onclick="goForward();" /></br>  
        <input type="button" value="刷新" onclick="refreshPage();" /></br>  
    </body>  

Screen对象

screen存储了客户的电脑屏幕信息和硬件配置，使用较少，使用到时知道有这些即可，下面是screen的属性：

属性
说明
availHeight
浏览器可用高度，不含系统任务栏
availWidth
浏览器可用宽度，不含系统任务栏
availLeft
屏幕最左的x坐标
availTop
屏幕最顶y坐标
colorDepth
浏览器分配颜色和深度
height
浏览器的屏幕高度
width
浏览器的屏幕宽度
pixelDepth
浏览器的屏幕颜色和深度
我们用一个例子展示一下各个属性的作用：

[html] view plaincopyprint?
<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" onclick="showInfo();" />  
    </body>  
</html>  

运行结果：

结合上面说到的window方法，可以达到精确控制浏览器色度和位置属性。

Document对象

浏览器每个窗口中都包含一个document属性，这个属性引用的是HTML文档的Document对象，它包含JavaScript脚本和表单等内容。我们可以称之为O级DOM，我们常说的1级DOM借鉴了很多这个Document对象的属性和方法。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相同

总结

这篇博客介绍了BOM的内容，很繁琐也没有记忆的必要，主要是为了展示BOM有这些东西，当我们需要的时候知道去哪里找即可，就怕用的时候不知道有这么个方法属性，所以写出来和大家分享。

可以看出BOM有很多属性和函数，但是这只相当于API，还得凭借JavaScript调用才能展现出来，二者配合才能实现操作，可以更直观的看出JavaScript的客户端脚本语言特性——依托宿主环境。

其实说这么多，主要是为了把以前模糊的知识系统的梳理一下，对比JavaScript核心和BOM二者的区别及之间的关系，以便更好地使用JavaScript调用BOM的内容。

0 0