BOM基础

110 阅读1分钟

1、获取浏览器的尺寸

    window.innerWidth      获取当前浏览器窗口的宽度
    window.innerHeight     获取当前浏览器窗口的高度

image.png

2、浏览器的弹框

    window.alert()
    window.confirm()
    window.prompt()

image.png

3、浏览器的地址信息

    window.location.href = ''  //存储浏览器地址栏内url 地址的信息
    window.location.reload()   //从新加载页面,相当于刷新---不要写在全局里,否则浏览器会一直刷新

image.png

4、浏览器的浏览记录

    window.history.back 用来回退历史纪录的, 就是回到前一个页面, 相当于浏览器左上角的 ← 按钮
    window.history.forward 是去到下一个历史记录里面, 也就是去到下一个页面, 就相当于 浏览器左上角的 → 按钮

5、获取到浏览器的信息

    window.navigator

6、浏览器的事件

    //浏览器的延迟加载事件
    window.onload = function () {
        console.log('页面已经加载完毕')
    }
    //浏览器滚动事件
    window.onscroll = function () {
        console.log('浏览器滚动了')
    }

7、浏览器的滚动距离

    document.body.scrollTop
    document.documentElement.scrollTop
    两者区别:
            IE 浏览器(了解)
            没有 `DOCTYPE` 声明的时候, 用这两个都行
            有 `DOCTYPE` 声明的时候, 只能用 `document.documentElement.scrollTop`
            ChormeFireFox
            没有 `DOCTYPE` 声明的时候, 用 `document.body.scrollTop``DOCTYPE` 声明的时候, 用 `document.documentElement.scrollTop`
            Safari
            两个都不用, 使用一个单独的方法 `window.pageYOffset`

image.png

8、浏览器的本地存储

    window.localStorage.setItem(kay,value)
        浏览器的本地存储,持久化存储,存储之后不手动删除,就永远存在
        在存储的时候,只能存储基本数据类型中的字符串
        如果需要存储其他数据类型, 需要借助 JSON 提供的方法
        可以实现跨页面通讯

image.png
image.png

image.png

    window.localStorage.getItem(key)
    //查询本地信息

image.png

    window.localStorage.removeItem(key)
    //删除某一信息

image.png

    window.loaclStorage.clear()
    //清空信息

image.png