BOM之概述

概述

• BOM：专门操作浏览器窗口的API
• window
  
  • 角色
    
    • 代替了ES中Global充当全局对象
    • 封装了浏览器软件/窗口对象的属性和方法 —— BOM
  • 打开新连接的方式
    
    • 在当前窗口打开，允许后退： window.open(“url”,”_self”)
    • 在当前窗口打开，不允许后退
      
      • history：记录当前窗口本次打开后成功访问过后的url，历史记录栈
      • location：当前窗口正在打开的url对象（地址栏）
      • history.go(-1)：相当于点一次后退按钮
      • history.go(1)：相当于点一次前进按钮
      • history.go(0)：相当于点一次刷新按钮
      • location.replace(“url”);
    • 在新窗口中打开，可打开多个
      
      • js: window.open(“url”[,”_blank”]);
    • 在新窗口打开，不可打开多个
      
      • 内存中，窗口都有唯一name属性。浏览器规定：同名窗口，只能开一个。后开的会覆盖新开的。
      • 其实target后的属性值，就是窗口的name属性，可自定义
      • HTML:
      • window: window.open(“url”,”自定义窗口名”)
  • 窗口大小和窗口定位
    
    • 在打开窗口时，就设定窗口大小：
      
      • var opendWindow = window.open(“url”,”name”,config); var config = “top=?,left=?,width=?height=?resizable=yes|no,location=no”
    • 大小：window.innerHeight/Width —— 文档显示区的宽高
      
      • 文档显示区：仅用于显示网页区域范围的大小
      • window.height/width：整个窗口的宽/高
    • 屏幕大小：
      
      • screen.height/width：操作系统的桌面分辨率
      • screen.availHeight/Width：桌面分辨率去掉任务栏的宽度
    • 调整大小：
      
      • window.resizeTo(width,height)
      • window.resizeBy(宽度增量,高度增量)
    • 移动窗口位置
      
      • window.moveTo(left,top)
      • window.moveBy(x的增量,y的增量)
• cookie：客户端保存用户个人信息的文件
  
  • 每个cookie是一个key/value对
  • 何时使用：在客户端持久缓存数据时
  • 什么样的数据放在客户端：用户的个人信息、操作、配置
  • 为什么要持久保存：即使当前会话结束，其他网页或下次启动会话，还需要使用该数据
  • cookie属性：
    
    • expires：过期时间 —— 晚于当前时间的时间点，下次访问相同网页时，浏览器会检查cookie，如果过期，才会删除cookie
    • domain：规定了cookie只能被哪个域名使用，可设置
  • 如何使用cookie
    
    1. 保存：document.cookie = “key = value”
    2. 读取：var cookies = document.cookie.split(“;”);cookie[i]:”key = value”