【学习笔记37】BOM基本认识

1、认识BOM

• BOM：浏览器对象模型
• 可以理解为浏览器给我们提供了一系列方法
  1. 可以打开一个浏览器弹窗框
  2. 记录当前窗口大小
  3. 操作页面跳转
  4. ……

2、获取浏览器窗口的尺寸

• JS的全局作用域, 有一个window对象, 我们BOM的方法都在他里边
• 使用的时候语法：window.XXX
• 但是window可以忽略不写

       console.log(window);
1

获取浏览器窗口的尺寸

       console.log(window.innerHeight);
       console.log(window.innerWidth);
1
2

4、浏览器的地址信息

• window有一个location, 内部记录了浏览器的地址信息
• location 内部有一个`href属性·, 可以获取当前浏览器的地址, 也可以给他赋值新地址, 实现页面跳转

        setInterval(function(){
            // 跳转页面
            window.location.href = 'http://www.yizhiyang31.com';
        }, 3000)
​
1
2
3
4
5

5、浏览器的刷新功能

window对象内部有一个location他的内部有一个reload 方法

        var count = 0;
        setInterval(function(){
            count++;
            console.log(count);
​
            if(count === 5){
                // 不要写在刷新的外部 要不然会一直刷新
                // 应该写在一个条件的内部
                window.location.reload();
            }
        }, 1000)
1
2
3
4
5
6
7
8
9
10
11

6、浏览器的历史记录

• 模拟左上角的回退与前进
• window内部有一个history，内部有方法能够让我们能实现浏览器的前进回退功能
• window.history.back() 回退
• window.history.forward()前进(必须现有过一次回退, 才能使用前进)

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

window 对象中的navigator,对象可以查到相关信息

    console.log(window.navigator);
1

8、浏览器的onload事件

• onload事件, 等到页面的所有资源加载完毕后在执行
• 浏览器的图片加载是异步的

        window.onload = function () {
​
            console.log(100);
        }
1
2
3
4

9、浏览器的onscroll事件

• 实就是浏览器的滚动事件, 浏览器页面滚动的时候会触发

        window.onscroll = function () {
            
            console.log('页面滚动~~~~~');
        }
1
2
3
4

浏览器的滚动距离

因为是页面滚动, 所以需要使用 document 对象去获取滚动的距离

方法:
document.body.scrollTop              在浏览器没有声明 
document.documentElement.scrollTop   在浏览器声明了 
document.body.scrollLeft             在浏览器没有声明 
document.documentElement.scrollLeft  在浏览器声明了 
1
2
3
4
5

    <div></div>
    <style>
        div {
            width: 5000px;
            height: 5000px;
        }
    </style>
1
2
3
4
5
6
7

        window.onscroll = function () {
            console.log('开始滚动~~~')
            console.log(
                'document.body.scrollTop: ', document.body.scrollTop,
                'document.documentElement.scrollTop: ', document.documentElement.scrollTop
            )
        }
1
2
3
4
5
6
7

        window.onscroll = function () {
            console.log('开始滚动~~~')
            console.log(
                'document.body.scrollLeft: ', document.body.scrollLeft,
                'document.documentElement.scrollLeft: ', document.documentElement.scrollLeft
            )
        }
1
2
3
4
5
6
7