JavaScript—BOM

一、BOM简介

•ECMAScript是JavaScript的核心，但如果要在Web使用JavaScript，那么BOM（浏览器对象模型）则无疑才是真正的核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

•多年来，缺少事实上的规范导致BOM既有意思又有问题，因为浏览器提供商会按照各自的想法随意去扩展它。于是，浏览器之间共有的对象就成了事实上的标准。W3C为了把浏览器中JavaScript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5的规范中。

•BOM非常庞大，但是，初学者只需要使用BOM中不到10%的对象、属性和方法，本章介绍BOM中较常用的部分。

•BOM对象的层级结构

二、window对象

•BOM的核心对象是window，它表示浏览器的一个实例（即浏览器的窗口或框架）。Window对象是其他所有对象的顶级对象。

•在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象的具体实现。网页中定义的任何一个对象、全局变量和函数都会成为window对象的子对象、属性、方法。

•虽然全局变量会成为window对象的属性，但定义全局变量和在window对象上直接定义属性还是有区别：全局变量不能通过delete操作符删除，而直接在window对象上定义的属性则可以。

•window对象是一个全局对象，因此可以不使用其名称访问其属性和方法。

   如   alert(“Hello”);

        window.alert(“Hello”);

        window.defaultStatus=“状态栏信息”;

        defaultStatus=“状态栏信息”;

•window对象的常用属性和方法：

属性/方法	说   明
defaultStatus	指定窗口状态栏中的默认信息
status	指定窗口状态栏中的当前信息
frames	是一个数组，其内容是窗口中所有的框架
parent	当前窗口的父窗口
self	当前窗口
top	所有窗口的最顶层窗口
closed	返回指定窗口是否已经关闭
length	返回一个窗口内的子窗口数目
innerHeight	返回或指定浏览器窗口中文档的像素高度
innerWidth	返回或指定浏览器窗口中文档的像素宽度

•window对象的常用属性和方法：

属性/方法	说   明
outerHeight	返回或指定浏览器窗口边界的像素高度
outerWidth	返回或指定浏览器窗口边界的像素宽度
screenLeft	窗口相对于屏幕左边的位置（IE、Safari、Opera、Chrome）
screenTop	窗口相对于屏幕顶部的位置（IE、Safari、Opera、Chrome）
screenX	窗口相对于屏幕左边的位置（Firfox、Safari、Chrome）
screenY	窗口相对于屏幕顶部的位置（Firfox、Safari、Chrome）
open()	打开新窗口
close()	关闭用open方法打开的窗口
alert()	弹出警告框
confirm()	弹出确认框

•window对象的常用属性和方法：

属性/方法	说   明
prompt()	弹出输入框
setTimeout()	延时调用
clearTimeout()	取消延时调用
setInterval()	定时调用
clearInterval()	取消定时调用
moveBy(水平量，垂直量)	按照给定像素移动指定窗口
moveTo(x,y)	将窗口移动到指定坐标处
resizeBy(x,y)	将窗口缩放指定大小
resizeTo(x,y)	将窗口改变成指定大小
find()	弹出“查找”对话窗口

•window对象的常用属性和方法：

属性/方法	说   明
back()	模拟用户点击浏览器上的“后退”按钮
forward()	模拟用户点击浏览器上的“前进”按钮
home()	模拟用户点击浏览器上的“主页”按钮
stop()	模拟用户点击浏览器上的“停止”按钮
print()	模拟用户点击浏览器上的“打印”按钮
blur()	从窗口中移出焦点。当与focus方法合用时必须小心，因为可能导致焦点不断移进移出。
focus()	使窗口得到焦点

☞ 窗口位置     例题4-3.html

     screenLeft  screenTop  (IE、Safari、Opera、Chrome)

     screenX     screenY   （ Firfox、Safari、Chrome ）  

   跨浏览器操作方法：

☞ 窗口位置

     moveTo(x,y)   moveBy(水平,垂直)

   如  window.moveto(0,0);  //将窗口移动屏幕左上角

       window.moveBy(0,100); //将窗口向下移动100像素

       window.moveTo(200,300);

       window.moveBy(-50,0);  //将窗口向左移动50像素

   *这两个方法在许多浏览器中被禁用！

☞ 窗口大小

     innerWidth  innerHeight   outerWidth  outerHeight (IE9+、Firefox、Safari、Opera、Chrome)

 

   resizeTo(x,y)   resizeBy(x,y)

   如   resizeTo(400,300);   //将窗口大小变为400*300

        resizeBy(100,50);  //水平增大100，垂直增大50

   *这两个方法也被很多浏览器禁用！

☞ 打开、关闭窗口

     open()     close()

   如：

     window.open("http://www.baidu.com",target="topFrame");

     window.open("http://www.baidu.com","百度","width=400,height=300,left=100,top=50,resizeable=1,toolbar=1,status=1,scrollbars=1,menubar=1");

     window.close();

延时调用和定时调用

     setTimeout()    clearTimeout()

☞ 延时调用和定时调用

   setInterval()   clearInterval()

    

☞ 系统对话框

     alert()   confirm()   prompt()

三、location对象

•location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。Location对象是一个很特别的对象，它既是window对象的属性，也是document对象的属性。也就是说，window.location和document.location引用的是同一个对象。

•location对象常用的属性和方法：

属性/方法	说   明
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档。

•location对象的导航功能

   window.location="http://www.baidu.com";

   location.href="http://www.baidu.com";

    location.assign("http://www.baidu.com");

    location.replace("http://www.baidu.com");

四、screen对象

•screen对象在JavaScript中用处不大，主要用来反映用户当前的屏幕设置。

•常用属性

  

属性/方法	说   明
width	返回屏幕的高度
height	返回屏幕的高度
availWidth	返回屏幕的高度 (除 Windows 任务栏之外)
availHeight	返回屏幕的高度 (除 Windows 任务栏之外)
colorDepth	返回当前设置的颜色位数

五、history对象

•history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。

•常用属性和方法：  

属性/方法	说   明
length	历史记录的数量
current	当前页面的url
next	历史列表的下一个url
previous	历史列表的前一个url
back()	返回前一页
forward()	进入下一页
go()	跳转到指定的历史页面

六、navigator对象

•navigator对象包含有关浏览器的信息。虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。

•常用属性和方法

  

属性/方法	说   明
appCodeName	返回浏览器的代码名称
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
appMinorVersion	返回浏览器的次级版本
language	返回浏览器的主语言
cookieEnabled	浏览器cookie是否启用
platform	浏览器所在的系统平台
plugins	浏览器中安装的插件信息的数组
javaEnabled()	浏览器中是否启用了java

•检测插件：检测浏览器是否安装了特点的插件是一项非常常见的检测例程。对于非IE浏览器，可以使用plugins数组来达到目的。而在IE中，检测插件的唯一方式就是使用专有的ActiveXObject类型，并尝试创建一个特定插件的实例。