JavaScript浏览器对象

ForInWay
1,609 阅读5分钟

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中包含'#'，返回该符号之后内容。
    如：www.morgan.test/index.html#…
 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
   事件响应函数：与事件绑定的执行函数，可以在事件被触发时执行相关操作。
   事件对象：一般来说，当事件发生时，会产生一个描述该事件的具体对象，该对         象可通过参数形式传递给函数，让执行函数能了解事件详细信息。
 绑定事件方式    

  • 直接绑定在标签上
  • 获取dom对象，使用函数形式绑定
  • 通过addEventListener绑定
avatar
文章
阅读
粉丝