BOM(浏览器对象模型)

什么是BOM

• BOM是browser object model的缩写，简称浏览器对象模型
• BOM提供了独立于内容而与浏览器窗口进行交互的对象
• 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
• BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
• BOM最初是Netscape浏览器标准的一部分

在BOM章节中你将学到什么

BOM教程中，同学们将学到与浏览器窗口交互的一些对象，例如可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等

BOM结构图

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象

由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象，例如下面两行代码是一样的：

示例

document.write("www.dreamdu.com");
window.document.write("www.dreamdu.com");

BOM即浏览器对象模型，它包括如下一些对象！

（一）screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。

常见的属性有：

availHeight:返回显示屏幕的高度

availWidth:返回显示屏幕的宽度

colorDepth:返回目标设备或缓冲器上的调色板的比特深度。

height:返回屏幕区域的实际高度

width:返回屏幕区域的实际宽度

 

（二）Window对象,Window 对象表示一个浏览器窗口或一个框架。

常见方法：

(1)窗口的打开与关闭：

window.open(URL,name,features,replace),四个都为可选参数

URL：新窗口中显示的文档的 URL

name：声明了新窗口的名称

features：声明了新窗口要显示的标准浏览器的特征

replace：布尔值，true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。 

 

window.close()关闭当前窗口

 

（2）改变窗口的位置和大小：

moveTo(x,y) 方法可把窗口的左上角移动到一个指定的坐标。

moveBy(x,y) 方法可相对窗口的当前坐标把它移动指定的像素。

resizeTo(width,height) 方法用于把窗口大小调整为指定的宽度和高度。

resizeBy(x,y) 方法用于根据指定的像素来调整窗口的大小。

 

(3)状态栏，通过设置window对象的status属性和defaultStatus属性来改变状态栏显示的基本信息。

如： window.defaultStatus = "php点点通";

 

(4)定时设定,定时器可以在特定的时间内执行特定的函数

setTimeout(epress,time) 方法用于在指定的毫秒数后调用函数或计算表达式。

clearTimeout(timeID)停止已经启动的定时器

如下脚本：

   
   
   
   

    
    
    
    
<script>
    
    
    
    
 
    
    
    
    
 function timer(){
    
    
    
    
 
    
    
    
    
 var t = setTimeout("alert('5秒到了')",5000);
    
    
    
    
 
    
    
    
    
 }
    
    
    
    
 
    
    
    
    
</script>
    
    
    
    
 
    
    
    
    
<input type="button" value="点击改变" onclick="timer()" />
   
   
   
   

 

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

clearInterval()停止使用setInterval() 方法

如下脚本：

   
   
   
   

    
    
    
    
<script>
    
    
    
    
 
    
    
    
    
var timer;
    
    
    
    
 
    
    
    
    
function start(){
    
    
    
    
 
    
    
    
    
var date = new Date().toLocaleString(); 
    
    
    
    
 
    
    
    
    
window.status = date;
    
    
    
    
 
    
    
    
    
}
    
    
    
    
 
    
    
    
    
</script>
    
    
    
    
 
    
    
    
    
<input type="button" value="显示时间" onclick="timer=setInterval('start()',1000)" />
    
    
    
    
 
    
    
    
    
<input type="button" value="停止时间" onclick="clearInterval(timer)" />
   
   
   
   

(5)Navigator对象，包含的属性描述了正在使用的浏览器

appName:返回浏览器的名称。

appVersion:返回浏览器的平台和版本信息。

platform:返回运行浏览器的操作系统平台。

appCodeName:返回浏览器的代码名。

 

(6)History对象，其实就是来保存浏览器历史记录信息。

其属性有：length，返回浏览器历史列表中的 URL 数量。

其方法有：

back()加载 history 列表中的前一个 URL。

forward()加载 history 列表中的下一个 URL。

go()加载 history 列表中的某个具体页面。

如常见的返回上一页：History.go(-1)和history.back()

 

(7)Location对象，Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

其方法：

hash:设置或返回从井号 (#) 开始的 URL（锚）。

host:设置或返回主机名和当前 URL 的端口号

hostname:设置或返回当前 URL 的主机名。

href:设置或返回完整的 URL。

pathname:设置或返回当前 URL 的路径部分

port:设置或返回当前 URL 的端口号

protocol:设置或返回当前 URL 的协议。

search:设置或返回从问号 (?) 开始的 URL（查询部分）。

其方法：

assign()加载新的文档。

reload()重新加载当前文档。

replace()用新的文档替换当前文档。

转自：http://www.phpddt.com/dhtml/229.html 

更详细教程见：http://www.dreamdu.com/javascript/bom/

JavaScript window 对象

JavaScript moveBy() 函数

JavaScript moveTo() 函数

JavaScript resizeBy() 函数

JavaScript resizeTo() 函数

JavaScript scrollTo() 函数

JavaScript scrollBy() 函数

JavaScript focus() 函数

JavaScript blur() 函数

JavaScript open() 函数

JavaScript close() 函数

JavaScript opener 属性

JavaScript alert() 函数

JavaScript confirm() 函数

JavaScript prompt() 函数

JavaScript defaultStatus 属性

JavaScript status 属性

JavaScript setTimeout() 函数

JavaScript clearTimeout() 函数

JavaScript setInterval() 函数

JavaScript clearInterval() 函数

JavaScript document 对象

JavaScript write() 函数

JavaScript writeln() 函数

JavaScript document.open() 函数

JavaScript document.close() 函数

JavaScript frames 对象

JavaScript history 对象

JavaScript go() 函数

JavaScript back() 函数

JavaScript forward() 函数

JavaScript location 对象

JavaScript hash 属性

JavaScript host 属性

JavaScript hostname 属性

JavaScript href 属性

JavaScript pathname 属性

JavaScript port 属性

JavaScript protocol 属性

JavaScript search 属性

JavaScript assign() 函数

JavaScript replace() 函数

JavaScript reload() 函数

JavaScript navigator 对象

JavaScript userAgent 属性

JavaScript cookieEnabled 属性

JavaScript screen 对象

JavaScript availHeight 属性

JavaScript availWidth 属性

JavaScript colorDepth 属性

JavaScript pixelDepth 属性