BOM

javascript 的组成部分

• DOM (document object model) 文档对象模型
• BOM (browers object model) 浏览器对象模型
• ECMAScript js 的核心

BOM 五大对象

window 对象

​ window 包含了当前页面的所有js对象方法

• innerWidth/innerHeight

  • 浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。--mdn

• open 方法 window.open(URL,target,specs,replace)

  • URL 新窗口地址
  • target 属性 新窗口打开方式
    • _blank
    • _self
  • specs 新窗口规格（不太常用，很多方法不兼容）
    • width=pixels 新窗口的宽度.最小值为100
    • height=pixels 新窗口的高度。最小值为100
    • location=yes|no|1|0 是否显示地址字段.默认值是yes
    • menubar=yes|no|1|0 是否显示菜单栏.默认值是yes
    • resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes
    • scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes
    • status=yes|no|1|0 是否要添加一个状态栏.默认值是yes
    • titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
    • toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes

• close 方法关闭窗口

• scroll 事件

• resize 事件 改变窗口大小时候触发

• 操作滚动条位置

  • window.scrollX、window.scrollY、获取滚动条的位置
  • window.scrollTo() 设置滚动条的位置
  • window.onload()
  • document.documentElment.scrollTop、document.documentElment.scrollLeft

• window 下的各类弹窗

  • alert()
  • confirm('message')
  • prompt([msg],[defaultText])

location 对象

​ 地址栏信息

• hostname

• port

• protocol

• href 网址

• hash 哈希值--地址栏后面#+xxx xxx是哈希值，

  • 取值时候可以把#截取了再使用
  • hashChange事件，监听地址栏hash值的变化而触发的一个方法

• search() 地址栏后面?+xxx xxx是搜索值，

  • search 值的解析，转换成对象的一个思考

     // {a:1,b:2}
    var arr = location.search.substring(1).split('&');
    
    console.log(arr)
    
    var obj ={};
    arr.forEach(function(item,index){
        // "a=1"
        // ['a','1']
        var subArr = item.split('=');
        obj[subArr[0]] = subArr[1];
    })
    
    console.log(obj);
    

• location.reload() 重新加载

• replace()

history 对象

• back()、回退，返回上一页
• forward() 历史记录前进
• go(n)
  • n表示跳转到指定的第几层的历史纪录
  • 正值往前，负值往后
• state
• pushState()
• popstate
  • history 路由实现原理

navigator 对象

• userAgent
  • 浏览器版本
  • 操作系统
  • 用于做兼容处理
  • 更多
• appName
  • 浏览器的内核名称
• appVersion
  • 浏览器的版本

screen 对象

​ 终端设备的整体信息

​ screen.width 设备宽度

​ screen.height 设备高度

​ 思考：做登录遮罩的时候，把半透明的遮罩的尺寸做到设备宽高也是合适