BOM:浏览器对象模型,用来访问和操纵浏览器窗口,使用bom对象能获取浏览器信息、对当前浏览器窗口进行操控、文档对象的操作、当前url信息及浏览器的历史记录。
一:navigator
navigator对象包含的属性描述了正在使用的浏览器,可用window.navigator对象获取navigator对象,该对象的实例唯一。
appCodeName:浏览器代码名(mozilla)
appName:浏览器名称(Netcape)
appVersion:浏览器平台和版本信息
platform:浏览器操作系统平台
userAgent:返回客户机发送给服务器的user-agent头部的值(可由该属性判断PC还是手机)
browserLanguage:返回当前浏览器的语言
systemLanguage:返回系统默认语言
userLanguage:返回系统自然语言设置
二:location
浏览器当前的URL信息,可通过window.location和document.location方式获取
hash:如果url中包含'#',返回该符号之后内容。
如:http://www.morgan.test/index.html#test返回'#test'
host:服务器名字,如上www.morgan.test
hostname:通常等于host,有时会省略前面的www
href:当前页面的完整URL
pathname:URL主机名之后的部分,如上即是'/index.html#test'
port:URL中的端口号,如果没有显示的指明端口号,则该属性返回undified
protocol:URL使用的协议
search:GET请求的URL中查询字符串
assign('url'):跳转到该URL页面
replace('url'):跳转到该URL页面,之后会从浏览器历史记录中删除包含此脚本的页面,浏览器不能通过后退和前进按钮来访问。
relaod(boolean flag):重新载入当前页面,默认为false。
false:缓存中载入页面
true:从服务器载入页面
注意:由于网络延迟和资源因素决定,reload()方法后的代码可能被执行,也可能不被执行,最好把reload()放在调用代码的最后一行。
三:history
history对象保存着用户上网的历史记录,从窗口打开那一刻算起,由于安全方面考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以实现前进与后退,history获取历史记录时,通常从浏览器缓存中加载,而不是从服务器加载。
go(int step):向前跳转step页,为负数则向后跳转step页
back():向后跳转1页
forward():向前跳转1页
HTML5新方法
pushState(state,title,url)
向浏览器历史记录中添加一个状态,state为状态对象,url为最新地址(必须和当前url在同一个域,否则会丢出异常),例子如下,假设当前url为www.morgan.com/test.html,使用pushState()方法
var state = {test:"test"};
history.pushState(state,null,'test2.html');
调用pushState方法之后,地址栏变为www.morgan.com/test2.html,但并不会跳转到test2.html,也不会检查test2.html是否存在,仅仅只是引起history对象发生变化和地址栏的url发生变化,不会触发页面刷新,url的hash值变化,也不会触发hashChange事件。
replaceState(state,title,url)
replaceState方法与pushState方法效果一样,不同之处在于replace会替换当前历史记录中的条目而并非创建。
state:history.state返回当前页面的state对象。 所谓状态对象指页面字体颜色、滚动条位置、阅读进度、组件开关等都可以存储到state。
popState事件
简单的调用pushState和replaceState并不会触发popState事件,必须结合点击前进、后退按钮或通过js方式调用back()、forward()、go()方法时才会触发。可以为事件指定回调函数,以进行处理。
window.onpopstate = function (event){
console.log("state:"+JSON.stringify(event.state));
}
四:window
window对象表示浏览器的一个实例,也是ECMAScript规定的Global对象。
name:指定窗口的名称
parent:当前窗口(框架)的父窗口对象
top:代表主窗口,是最顶层的窗口,也是所有其他窗口的父窗口对象
self:返回当前窗口的一个对象,即self==window
open([url],[target],[options])
打开一个已存在的窗口,或者创建一个新窗口,并在该窗口中加载一个文档
url:新窗口地址,未指定,将默认加载空白页。
target
_self:在当前窗口加载新页面
_blank:在新窗口加载新页面
_parent:在父窗口加载新页面
_top:在顶层窗口加载新页面
options:新窗口的属性,key-value组成的一个对象,可以设置高度、宽度、位置、是否全屏等。
全局作用域
window为一个Global对象,在全局作用于声明的对象、变量都会变成window的属性和方法,定义全局变量和在window对象上定义属性还是有区别,全局变量不能通过delete删除,而在window对象上定义的属性则可以,示例如下
var age=28;
window.color="red";
delete window.age;
delete window.color; //return true
alert(window.age); //28
alert(window.color); //undefined
五:event
event对象代表事件状态,通常与函数结合使用。
事件驱动编程:所谓事件驱动,即你点击什么按钮、改变什么值,就会触发事件绑定的函数。可以用来进行监控状态的变化。事件驱动有如下核心的几个要素。
事件源:谁发出事件通知,发出消息的即事件主体
事件名称:通知消息的名称,比如click
事件响应函数:与事件绑定的执行函数,可以在事件被触发时执行相关操作。
事件对象:一般来说,当事件发生时,会产生一个描述该事件的具体对象,该对象可 通过参数形式传递给函数,让执行函数能了解事件详细信息。
绑定事件方式
1.直接绑定在标签上
2.获取dom对象,使用函数形式绑定
3.通过addEventListener绑定