关于BOM

作者: 郑宋君 | 来源:发表于2018-11-07 00:11 被阅读0次
    浏览器对象模型(Browser Object Model)也就是BOM

    BOM由多个对象组成,其中代表了浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象
    window
    BOW的核心是windwo对象,他表示浏览器的一个实例。在浏览器中,可以堪称javascript访问浏览器窗口的一个接口,又是ECMAscript规定的Global对象,这就意味着在网页中定义的任意变量,函数,对象都是以window作为Global对象

    所以可以理解成全局作用域中声明的变量,函数,对象都会作为window的属性和方法

    var a = 3;
    console.log(window.a)      //3
    function printArr(){
      console.log([1,2,3,4,5,6,7])
    }
    window.printArr()    //[1,2,3,4,5,6,7]
    

    window对象属性

    window.innerHeight属性,window.innerWidth属性

    这个两个属性返回的是网页中css布局占据的浏览器窗口的高度和宽度,单位为像素。很显然,当用户方法网页的时候(放到至200%时),这两个值辉变小
    注意:这个两个属性包括滚动条的高度和宽度

    scrollX,scrollY

    1.scrollX:滚动条横向偏移
    2.scrollY:滚动条纵向偏移
    这两个值随着滚动的位置变化而变化

    scrollTo,scrollBy,scroll

    我们也可以通过scrollTo或者scroll方法改变滚动条位置到指定坐标

    window.scrollTo(0,300)     //滚动条移动到300px处
    

    两个参数分别是水平、垂直方向偏移
    scrollBy可以相对当前位置移动滚动条,而不是移动到绝对位置

    scrollBy(0, 100); // 滚动条下移100px
    
    navigator包含浏览器相关信息的对象
    screen

    screen对象包含了显示设备的信息

    //显示设备的高度,单位为像素
    screen.height
    ////显示设备的宽度,单位为像素
    screen.width
    

    一般使用以上两个属性,了解设备的分辨率。上面代码显示,某设备的分辨率是1920x1080。除非调整显示器的分辨率,否则这两个值可以看作常量,不会发生变化。显示器的分辨率与浏览器设置无关,缩放网页并不会改变分辨率。

    window.getComputedStyle

    getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])
    一看这个函数的名字我们就知道问题解决了

    var style =  window.getComputedStyle('元素','伪类')
    

    第二个参数没有伪类就不设置

      var div = document.getElementById('test');
      console.log(getComputedStyle(div).width);
    
    URL的编码/解码方法

    Javascript提供了四个URL的编码和解码方法
    1.decodeURL()
    2.decodeURLComponent()
    3.encodeURL()
    4.encodeURLComponent()
    区别:
    encodeURI方法不会对下列字符编码

    1. ASCII字母
    2. 数字
    3. ~!@#$&*()=:/,;?+'
    

    而encodeURLComponent()方法不会对下列字符编码

    1. ASCII字母
    2. 数字
    3. ~!*()'
    

    这样看来encodeURLComponent比encodeURL解码范围更广

    var str = https://www.baidu.com/s?wd=刘亦菲;
    console.log(encodeURI(str))  //"https://www.baidu.com/s?wd=%E5%88%98%E4%BA%A6%E8%8F%B2"
    console.log(encodeURIComponent(str))  //"https%3A%2F%2Fwww.baidu.com%2Fs%3Fwd%3D%E5%88%98%E4%BA%A6%E8%8F%B2"
    

    使用场景呢
    如果有时候我们直接访问一个页面,但是你没有登陆,这个时候会返回到登陆页面,你登陆后,直接跳转到你刚才想看的页面
    比如说你直接输入淘宝的购物车这个页面的地址,浏览器页面跳转到购物车,这个时候后台判断你没有登陆,就让你返回登陆页面去填写你的用户信息。你输入用户信息后就携带你的用户信息进入购物车页面,这就很舒服
    在我们前端操作上首先我们要获取你的到你的购物车页面,将他保存起来存在url'地址栏里面,然后你登陆成功后在重新去获取你的地址栏刚刚存的页面提取出来进入
    这个时候就会出现一个很尴尬的情况,你可能进入页面携带啦参数比如说http:www.taobao.com/shopping.html?a=3&&b=5
    浏览器跳转到登陆页面会变成https://www.taobao.com/login.html?redirectURL=https:www.taobao.com/shopping.html?a=3&&b=5
    这个时候他怎么去获取原先存储的页面呢

    相关文章

      网友评论

          本文标题:关于BOM

          本文链接:https://www.haomeiwen.com/subject/bxopxqtx.html