BOM(Browser Object Model)

2017-04-26 本文已影响239人饥人谷_hak

什么是BOM

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

TIM截图20170424125747.png

可以看到图中并没有叫BOM的 , 搜索中出现的第一个链接是Window MDN .
因为BOM并没有 specification

BOM属于约定俗成 , 比如 Firefox 怎么实现 , chrome就照抄一下 , 包括一些其他的浏览器 . 所以会有一些独立的API,并不互相支持

大部分的通用API

window.history
这个API控制前进返回,按钮

TIM截图20170424125747.png

后退就是 , window.history.back()
前进就是 , window.history.forward()
window.history.go(-1) //等价于back()
window.history.go(1) //等价于forward()

window.innerHeight

获取浏览窗口的高度

window.location

用于操作地址栏
window.location.href = 'https://www.baidu.com' //操作跳转到百度
也可以使用这种写法window.location

window.location.protocol 获取当前协议
"https:"
window.location.hostname 获取域名
"www.jianshu.com"
window.location.port 获取端口号
"" //没有就显示空字符串
window.location.host 获取域名和端口号
"www.jianshu.com" 没有端口号就不显示
window.location.pathname 获取路径
"/writer" 它不包含查询字符串
window.location.search 获取查询字符串
"" 没有就显示空字符串
window.location.hash 获取#后面的内容 ,fragment
"" 没有显示空字符串 ,
window.location.origin 获取网站的起源, 协议+域名+端口号
"http://www.jianshu.com"

window.name

获取窗口的名字, 可以修改

window.navigator

获取浏览器的所有信息

window.outerHeight

获取整个浏览器的高度

window.pageXOffset

等同于window.scrollX

window.pageYOffset

等同于window.scrollY

window.parent

返回当前窗口的父窗口对象.
如果一个窗口没有父窗口,则它的 parent 属性为自身的引用.
如果当前窗口是一个 <iframe>, <object>, 或者 <frame>,则它的父窗口是嵌入它的那个窗口

window.screen

屏幕相关的信息

window.screen.availHeight
返回浏览器窗口在屏幕上可占用的垂直空间，即最大高度。

window.screen.availWidth
同理 , 这是宽度
window.screen.height //屏幕的高度
window.screen.width //屏幕的宽度

window.self

window.self === window
self(自己) 如名字一样就是它自己
你很可能覆盖全局变量

window.top

返回最顶层的祖先窗口

window打开新窗口

window.open('https:www.baidu.com') //默认_blank

window.open('https:www.baidu.com','_self') //它接受一个像a标签target属性,_self当前窗口打开
window.open('https://www.baidu.com','_self',[第三个参数可设置窗口])
let f = 'height = 400px , width = 400px'
window.open('https://www.baidu.com','_blank',f)
这样可以设置一个在另一个窗口打开的,宽高个400px的窗口
let f = 'height = 400px , width = 400px , location=on'
window.open('https://www.baidu.com','_blank',f)
设置location=on , 这样就不能修改URL
在弹出的子窗口中设置window.opener.location.reload()
这样可以设置弹出的子窗口刷新父窗口

在页面正中央打开一个制定宽高的window

window.$ = function(){    //声明一个全局变量$ , 这个函数就是对象 , 这个函数和下面的bom属性没关系
        let array = []  
        return array          
    }

$.bom = {                //给$绑定一个属性bom , bom是个对象
      openAtCenter: function(width,height,url){    //bom对象里有一个函数叫做,openAtCenter
      window.open(url,'_blank',`width=${width}px,height=${height}px, 
        screenX=${screen.width/2 - width/2}px,screenY=${screen.height/2 - width/2}`)
        //宽高等于你传的参数 , screenX的位置是屏幕宽度的一半减去宽的一半,screenY是屏幕高度的一半,减去高度的一半
      }
}

这个$的bom属性 , 之所以不写在$函数的里面 , 它会重复执行要避免这种情况
这时候你可以设置iframe,使用下面的代码

window.opener.location.reload()  //设置弹出的子窗口刷新父窗口
window.close()  //关闭自己

以上就是常见的弹出窗口登录和关闭

修改查询参数 location.search

window.$ = function(){
  let array = []
  return array
}

$.bom = {
  openAtCenter: function(width, height, url){
    window.open(url, '_blank', `
      width=${width}px,height=${height}px,
      screenX=${screen.width/2 - width/2}px,
      screenY=${screen.height/2 - height/2}px
    `)
  },

  search: function(name, value){
    let searchAll = function(){
      let result = {}
      let search = window.location.search
      if(search[0] === '?'){
        search = search.slice(1)
      }
      let searchArray = search.split('&')
      for(var i =0;i<searchArray.length; i++){
        let parts = searchArray[i].split('=')
        result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1] || '')
      }
      return result
    }
    let result = searchAll()
    if(value === undefined){
      return result[name]
    }else{
      if(result[name] === undefined){
        location.search += `&${encodeURIComponent(name)}=${encodeURIComponent(value)}`
      }else{
        result[name] = encodeURIComponent(value)
        let newSearch = '?'
        for(let key in result){
          newSearch += `${encodeURIComponent(key)}=${encodeURIComponent(result[key])}&`
        }
        location.search = newSearch
      }
    }
  }
}

encodeURIComponent() & decodeURIComponent()

encodeURIComponent()是对统一资源标识符（URI）的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码（只有由两个Unicode代理区字符组成的字符才用四个转义字符编码）。

TIM截图20170426130453.png