JS BOM总结

BOM的定义

          Browser Object Model      专门操作浏览器窗口的API——没有标准

          BOM包括：

                window：

                               1、代替ES中的Global充当全局作用域对象

                               2、封装所有浏览器内置的/DOM/BOM的API

                 history：专门保存历史记录,控制前进后退

                 location：专门保存浏览器正在打开的url地址

                 navigator：专门保存浏览器的配置信息

                 document：就是DOM中的document节点

                 screen：专门保存显示设备的信息

                  event：专门保存事件信息

window：

打开和关闭窗口：4种

  1. 在当前窗口打开,可后退

    html: <a href="url" target="_self">

    js: open("url","_self")

  2. 在当前窗口打开，不可后退

    js: location.replace("url")

  3. 在新窗口打开，可打开多个

    html: <a href="url" target="_blank">

    js: open("url","_blank")

  4. 在新窗口打开，只能打开一个

    html: <a href="url" target="自定义name">

    js: open("url"," 自定义name ")

    内存中每个窗口都有一个唯一的name属性

    浏览器规定: 同一个name属性的窗口只能打开一个

                后打开的同名窗口会覆盖先打开的

    其实target属性值，就是窗口的name属性

    预定义的name:

      _self: 用当前窗口自己的name打开新窗口

      _blank: 用空name打开新窗口

             浏览器会自动为每个空name属性的窗口随机分配name属性

窗口大小:

  文档显示区的大小:

    宽: innerWidth   高: innerHeight

history：

history: 封装当前窗口打开后，成功访问过的url的历史记录栈

  history.go(n)

    固定套路: history.go(1)  前进

             history.go(-1) 后退

             history.go(0)  刷新

      也可前进/后退多步

location：

location: 封装当前窗口正在打开的url的对象

 属性: .href 完整的url

        不但可获取，还可设置，实现在当前页面打开新连接

      .protocol: 协议

      .host: 主机名+端口号

      .hostname: 主机名

      .port: 端口号

      .pathname: 相对路径

      .hash: 获得#锚点地址

      .search: 获得表单提交后的查询字符串

 方法:

跳转: 在当前窗口打开，可后退 

location.assign("url")

          =>location.href="url";

            => location="url";

         在当前窗口打开，禁止后退

        location.replace("url")

   刷新: 2种:

     浏览器缓存: 浏览器在首次加载页面时，会将变化不大的静态资源(css,图片,html)缓存在客户端本地硬盘。

       为什么: 避免重复加载，节约网络流量，提高加载速度

       加载页面时: 优先在本地找可用的资源，如果本地资源比服务器上资源旧，才从服务器下载新资源。

     1. 普通刷新: 优先使用本地缓存中的文件        F5

        history.go(0)

        location.reload(/*false*/);

                      force

     2. 强制刷新: location.reload(true)

                             force

navigator：

navigator: 封装浏览器配置信息的对象:

  cookieEnabled: bool值, 判断浏览器是否启用cookie

    什么是: 客户端持久保存用户私密信息的小文件

    为什么: 程序内存中的数据都是临时的

    何时: 只要在客户端持久保存用户数据时

      典型: 记住密码, 游戏最高分

  plugins: 保存插件信息的集合

    什么是: 为浏览器添加新功能的小软件

  userAgent: 保存浏览器名称和版本号的字符串

    何时: 鉴别浏览器的名称和版本号时

     作业: 查找网上辨别浏览器名称和版本号的方法

screen：

screen: 专门保存显示设备信息

  屏幕宽: screen.width  屏幕高: screen.height