浏览器为JavaScript提供的对象集合通常称为浏览器对象模型(Browser Object Model,BOM)
另一种常见的术语是文档对象模型(Document Object Model,DOM,W3C标准)——>见下一个随笔
在开始介绍BOM对象的时候,先来了解一个关于BOM的一些小东西:
不仅JavaScript是基于对象的,而且浏览器也是由对象组成的。JavaScript在浏览器中运行时,可以访问浏览器对象。
JavaScript的这些附加功能都存在一个潜在的弊端:BOM没有标准的实现方式。可以使用哪个对象集合高度依赖于当前使用的浏览器的类型和版本。
BOM:
BOM对象非常庞大,但是初学者只需要使用BOM中的不到10%的对象,方法和属性。BOM有一个层次结构。在顶层的顶端是window对象,它表示浏览器的框架以及与其相关的所有内容,如滚动条和导航栏图标等。在BOM中,页面用document对象表示。
window对象下面有许多对象如:location对象(浏览器当前URL信息,当前页面的位置信息),history对象(浏览器访问历史信息),navigator对象(浏览器本身信息),screen对象(客户端屏幕信息),document对象(文档对象)等。
window对象是一个全局对象,因此不需要使用其名称来访问其属性和方法。window的某些属性也是对象。
window.alert() alert()//这两条代码是等价的
在web页面中值得注意的是,所使用的函数名或变量名不能与BOM对象及其属性和方法的名词相冲突。
history对象:
与JavaScript内置的Array类型类似,history对象也有length属性。使用它可以获得历史栈中的页面数量。
go()方法,back()方法,forward()方法 go(-1)等价于back(),go(1)等价于forward()
location对象:
获得当前页面位置:不仅包含了页面的统一资源定位器(URL)还包含保存该页面的服务器,连接服务器的端口号及使用的协议。通过location对象的href,hostname,port和protocol属性获得这些信息。
改变当前页面位置:1.location对象的replace()方法,但是这个方法将从历史栈中移除当前页面,代之以新页面。
2.使用location对象的href属性,把新页面加在历史栈的顶部。
navigator对象:
处理浏览器之间的差异,确定用户的浏览器,版本和操作系统(“浏览器嗅探”技术)
navigator对象的geolocation属性(也是一个对象):
geolocation对象的核心部分是getCurrentPosition()方法,调用该方法的时候必须传入两个回调函数,第一个参数是成功的时候执行的函数,第二个参数是失败的时候执行的函数。
函数传入的都是对象,失败函数传入的对象有两个属性值,第一个code表示失败原因的数值,第二个属性为message,表示描述错误的可读信息。
//获取位置 function geoSuccess(position){ var coords = position.coords var latitude = coords.latitude var longitude = coords.longitude var mess = "you're at "+latitude+","+longitude document.write(mess) } function geoError(errorObj){ document.write(errorObj.message+"<br>") document.write(errorObj.code) } navigator.geolocation.getCurrentPosition(geoSuccess,geoError)
screen对象:
包含了大量有关客户机显示能力的信息。
document对象:
具体请移步另一个BOM随笔。
images集合:
页面上的每幅图都有一个对应的img对象,每个img对象都保存在images集合中,该集合是document对象的一个属性。该集合与数组的用法相同,页面上第一幅图片在document.images[0]元素中。
links集合:
页面上所有a对象都包含在links集合中。
forms集合:
页面上所有froms对象都包含在froms集合中。
确定用户的浏览器:
特性检测:
检查特性是否存在,如果存在就使用该特性。
以下值为falsey: 0 ""(一个空字符串) null undefined 【】(一个空数组) false
typeof可能返回的值:1(数字) “hello”(字符串) true(布尔值) [](对象) {}(对象) undefined(未定义) null(对象)
//特性检测 if(navigator.geolocation){ document.write("true") } //减少歧义 if( typeof(navigator.geolocation) != "undefine"){ document.write("true") }
浏览器嗅探:
navigator对象的appName属性和userAgent属性在标识浏览器方面很有用。appName属性将返回浏览器的模型,userAgent属性返回一个包含多段信息的字符串。