JavaScript浏览器对象

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绑定

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容