javaScript之BOM

BOM

javascript 的组成部分

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

BOM 下五大对象

1、window 对象

• innerWidth/innerHeight 可视区宽高

• 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 事件 监听窗口大小发生改变

• 操作滚动条位置
  //仅仅适于chorme、firefox、mobile

  • window.scrollX 获取横向滚动条位置
  • window.scrollY 获取纵向滚动条位置
  • window.scrollTo (x,y) 指定滚滚动条位置
    //仅仅适于IE
  • document.body.scrollTop
  • document.body.scrollLeft
    //兼容chorme、firefox、mobile、IE
  • document.documentElment.scrollTop
  • document.documentElment.scrollLeft

• window 下的各类弹窗

  • alert()
  • confirm(‘message’) 有确定取消按钮，点击确定返回true,取消返回false
  • prompt([msg],[defaultText]) -msg 提示 -defaultText 显示内容

2、location 对象 地址：地址栏相关信息

• hostname 主机地址||域名
• port 端口
• protocol 协议：http||https
• href 完整的地址 既可以获取又可以设置
• hash #后边跟的内容 前端路由：根据路劲决定前端显示的视图
• hashChange 监听location中的hash变化
• search ?后边跟的内容，get方式提交的数据
• reload() 刷新页面 或者location.href = location.href
• replace() 替换地址栏信息

3、history 对象

• back() 历史记录回退
• forward() 历史记录前进
• go(n) -n回退n步 n前进n步
• state
• pushState()
• popstate
• history 路由实现原理

4、navigator 对象 存储设备信息、浏览器信息

• userAgent 用户代理信息
• appName
• appVersion
• 根据打开系统的设备进入不同页面

    <script>
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            window.location.href = "../H5/index.html"; //手机
        }
  </script>

5、 screen 对象

width 、height