JavaScript基础(15_BOM对象)

BOM对象

BOM对象

• 浏览器对象模型

• BOM可以使我们通过js来操作浏览器

• 在BOM中提供了一组对象，用来完成对浏览器的操作

  • Window

    • 代表整个浏览器的窗口，同时window也是网页中的全局对象

  • Navigator

    • 代表当前浏览器的信息，通过该对象可以来识别不同的浏览器

    • 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了

    • 一般我们只会使用userAgent来判断浏览器信息

      • ua是一个字符串，包含了描述了浏览器信息的字符串

  • Location

    • 代表当前浏览器的地址栏信息，通过location可以跳转页面

  • History

    • 代表浏览器的历史记录

    • 由于隐私原因，该对象不能获取到具体的历史记录，

      • 只能操作浏览器向前或者后退功能

      • 而且该操作只在当次有效

  • Screen代表用户的屏幕的信息，显示器的相关信息

    • 代表用户的屏幕的信息，显示器的相关信息

  • 这些DOM对象在浏览器中都是作为window的属性保存的

    • 可以通过window对象来使用，也可以直接使用

使用BOM对象判断浏览器

• chrome userAgent:

  • Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.80 Safari/537.36

• firefox userAgent:

  • Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:68.0) Gecko/20100101 Firefox/68.0

• safari userAgent:

  • Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0.1 Safari/604.3.5

• IE8-IE10

  • 均会出现MSIE标识字样，来确认浏览器的类型和版本

  • 但是到IE11时，MSIE字样标识已经彻底没有了，无法通过这个方式来判断

  • 注意：此时通过ua无法精准的判断浏览器类型是否为IE了，我们还可以通过一些浏览器中特有的对象，来判断浏览器信息

    • 比如IE中特有的对象:

    • ActiveXobject 【if(ActiveXobject)】【if("ActiveXobject" in window)】

• 案例

  • var ua = navigator.userAgent;
    console.log(ua);
    ​
    if(/firefox/i.test(ua)){
      alert("你是火狐");
    }else if(/chrome/i.test(ua)){
      alert("你是chrome");
    }else if(/msie/i.test(ua)){
      alert("IE浏览器");
    }else if ("ActiveXobject" in window){
      alert("你是IE11浏览器!");
    }; 

BOM对象-history

• length

  • 属性，可以获取到当前访问页面的连接数量

• back()

  • 可以用来回退到上一个页面，作用和浏览器的回退按钮一样,往后退一个页面

• forward()

  • 可以跳转到下一个页面，作用和浏览器的前进按钮一样,往前进一个页面

• go()

  • 可以用来跳转到指定的页面

  • 它需要一个整数作为参数

    • 参数=1 表示向前跳转一个页面

    • 参数=2 表示想前跳转两个页面

    • 参数=-1 表示向后跳转一个页面

    • 参数=-2 表示想后跳转两个页面

BOM对象-location

• 如果将location属性改为一个完整的路径，或者相对路径

• 则我们页面会自动跳转到该路径，并生成历史记录

  • assign()

    • 用来跳转到其他的页面，作用和直接修改location效果一样

  • reload()

    • 用于重新加载当前页面，作用和刷新按钮一样

    • 如果再方法中传递参数：true 表示强制清空缓存刷新页面

  • replace()

    • 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面

    • 不会生成历史记录，不能使用回退按钮