1. 浏览器的地址信息

• 在 window 中, 有一个 对象 叫做 location, 他是专门用来存储浏览器地址栏内的信息

1.1 location 这个对象中, 有一个属性叫做 href

这个属性是专门存储浏览器地址栏内的 url 地址的信息

我们也可以给这个属性赋值, 这样就会跳转到我们赋值的地址了

    setTimeout(function () {
        window.location.href = 'https://www.baidu.com/'
    }, 3000)

1.2 location 这个对象中, 有一个方法叫做 reload

这个方法调用时会重新加载页面, 相当于 刷新

    var count = 0
    setInterval(function () {
        count++
        console.log(count)
        
    if (count === 5) {
            window.location.reload()    // 不能直接写在 代码中
        }
    }, 1000)

注意!!! 不要直接写在代码中, 否则浏览器会一直刷新

console.log(window.location)

2. 浏览器的历史记录

window 对象中 有一个 叫做 history 他专门用来存储历史记录信息

2.1 history.back

专门用来回退历史记录, 就是回到前一个页面, 相当于浏览器左上角的 ← 按钮

注意: 我们需要有上一条记录, 否则不能使用这个方法

    语法: window.history.back()

2.2 history.forward

是去到下一个历史记录里面, 也就是去到下一个页面, 相当于浏览器左上角的 → 按钮

注意: 我们需要之前有过回退操作, 不然无法使用这个方法

    语法: window.history.forward()
    
    
    console.log(window.history)
    
    

3.BOM事件

    <style>
    .box {
        height: 5000px;
        width: 5000px;
    }
</style>

<div class="box"></div>

3.1 浏览器的版本信息(了解)

window 中的 navigator 可以获取到浏览器的信息

3.2 浏览器的 onload 事件

这个事件会在页面所有资源加载完毕后执行

    window.onload = function () {
    我们的 JS 代码全部书写在这个函数内部
           }

在浏览器中, 把 JS 写在 head 中, 在 JS 加载时, 下边的 body标签还没来得及加载 可能会导致我们获取body内部的标签, 比如说 div 或者 img, 出现问题获取不到

如果把代码放在 onload 中, 则不会出现这个问题

如果把 JS 写在 body 底部, 写不写 onload 都无所谓

3.3 浏览器的 onscroll 事件

当浏览器的滚动条滚动时会触发该事件, 或者鼠标滚轮滚动时触发(前提是有滚动条)

3.4 浏览器的滚动距离

浏览器的内容可以滚动, 那么我们就能获取到浏览器的滚动距离

其实浏览器并没有滚动, 而是浏览器内部的页面在滚动,换句话说: 浏览器没动, 页面向上或者向下走了,所以这个不能单纯的说是浏览器的内容了, 而是页面的内容,那么我们这里就不能再使用 window 对象, 而是使用 document 对象

scrollTop获取的是 页面向上滚动的距离

语法1:

     document.body.scrollTop
     

语法2:

     document.documentElement.scrollTop
     

两种语法的区别

IE 浏览器(了解)

• 没有 DOCTYPE 声明的时候, 两种语法没有差别用哪个都无所谓
• 有 DOCTYPE 声明的时候, 只能使用语法2 documentElement

Chorme 和 FireFox

• 没有 DOCTYPE 声明的时候, 用 语法1 body

• 有 DOCTYPE 声明的时候, 用 语法2 documentElement

Safari

• 这两个语法都不用, 使用一个单独的方法 window.pageYOffset

scrollLeft 获取的是 页面 向左的滚动距离

语法1:

    document.body.scrollLeft

语法2:

    document.documentElement.scrollLeft
    
    
    

`

        window.onscroll = function () {
        console.log('body: ', document.body.scrollTop)
        console.log('documentElement: ', document.documentElement.scrollTop)


        console.log('body: ', document.body.scrollLeft)
        console.log('documentElement: ', document.documentElement.scrollLeft)
    }