BOM中innerWidth/innerHeight方法、alter（）、confirm（）、prompt（）、location、onload、onresize、onscroll事件和scrollTo

大大源码 • 2023年3月8日 am12:55 • 未分类

1、BOM介绍

①BOM（Browser Object Model）：浏览器对象模型，其实就是操作浏览器的一些能力；

②我们可以操作哪些内容呢：

➊获取一些浏览器的相关信息（窗口的大小）

➋操作浏览器进行页面跳转

➌获取当前浏览器地址栏的信息

➍操作浏览器的滚动条

➎浏览器的信息（浏览器的版本）

➏让浏览器出现一个弹出框（alert/confirm/prompt）

➐...

③BOM的核心就是window对象

④window是浏览器内置的一个对象，里面包含着操作浏览器的方法

2、BOM里window对象方法介绍：

（1）获取窗口的宽和高：innerWidth和innerHeight（包含滚动条在内）

  <script>
        //获取宽度
        //方法一：不省略window
        var windowwidth = window.innerWidth
        console.log(windowwidth)
        //方法二：省略window
        var windowwidth = innerWidth
        console.log(windowwidth)

        //获取高度
        console.log(window.innerHeight,innerHeight)
  </script>

解释说明：window你可以加也可以不加，在使用window对象方法时，window可以省略；上面获取宽和高我一个重新定义了变量接收结果，另一个直接打印输出了。

✍浏览器窗口范围图示（红色框里的）：（有滚动条的话包括滚动条在内）

（2）提示框：alter（）、询问框confirm（）、输入框prompt（）

当你刷新一个页面，页面上面就会弹出一个提示框，它们两个的区别是alter（）只有一个“确定”选项，而confirm有两个选项，一个是“确定”，另一个是“取消”，当你点击取消时返回值是false，点击确定时返回值是true，输入框就是弹出来你输入内容，输入的内容返回，返回的内容是字符串形式的。

但是我们不怎么会在实际开发中用它们，因为这三个都会阻塞后面的代码执行，而且js是一个单线程的语言，同时只能执行一个代码，只有当你这个框点掉以后，后面的代码才能执行。

（3）获取浏览器的地址信息：location

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

location.href：

① location.href这个属性存储的是浏览器内url地址的信息，
console.log(location.href)
注意：你的地址栏信息可能有中文，但是最终获取到的地址信息会把你的中文进行编码，变成编码后的格式，方便传给后端和后端交互。

② location.href这个属性可读可写，你也可以给它赋值一个地址，它就会跳转到你赋值的那个地址页面去
location.href = "http://www.baidu.com"

（4）重新加载当前页面：location.reload（）

location.reload()

3、浏览器的事件：onload事件和onresize事件、onscroll事件和scrollTo（）方法

（1）浏览器的onload事件

这个不再是一个对象了，而是一个事件，是在页面所有资源加载完毕后执行的，这里的所有资源包括图片、视频、DOM等。。

  <script>
        window.onload = function(){
            console.log("页面已经加载完毕")
        }
  </script>

✍onload的原理体现：

我们配合按钮标签button来讲一下：当写了一个button标签以后，js代码中要用这个标签时，可不可以将script内包含的js代码写在head里面，而不是放在button标签后面，正常js代码是要放在button标签后面的,不然会出错。

为什么有这个问题存在呢：因为代码是从上到下执行的，一般是如果我们把js代码放在了head里面，把button等这些标签放在body里面，而且我们js代码要用到这个button标签，这个时候就会存在代码从上到下执行，在js里遇到button的一些东西我们都还没定义，那不就出错了吗。

图示：（代码从上到下执行在head里都不认识btn，因为btn是在body里才定义的）

✍但是我们的onload事件代码可以放在head里面，图示：

代码：（可复制）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            console.log("页面已经全部加载完毕")
            console.log(btn)
        }
    </script>
</head>
<body>
    <button id="btn"></button>
</body>
</html>
结果：

解释说明：为什么呢，onload就可以，那是因为onload事件的功能就是等页面全部加载完才执行的，所以我们上面代码的执行顺序是：从上到下走到script以后---定义window.onload这个事件，但是事件里面的代码不执行---继续往下走到定义button标签，然后代码都执行完了----再回头执行function（）函数，此时用btn就没事了，因为button已经在前面定义了。

（2）onresize事件：检测窗口大小的改变，也可以检测横屏状态或者竖屏状态，以便给用户一些提示

当窗口大小改变时，它就会执行：

window.onresize = function(){
            console.log("resize")
        }

（3）onscroll事件：当滚动滚动条时，它就会执行：

window.onscroll = function(){
            console.log("scroll")
            }

应用场景是：当滚动条滚动多少距离时我们增加什么属性。

✍获取页面往上滚动了多少的距离：（和onscroll一起使用能实现当滚动条往下拉来获取当前页面往上滚动了多少距离）

获取距离的两种方式：
document.documentElement.scrollTop
或者是：
document.body.scrollTop
和onscroll配合使用：（第一种获得距离的方式），（结果在最下面）

代码（可复制）：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 3000px;
        }
    </style>
</head>
<body>
    <script>
        window.onscroll = function(){
            console.log(document.documentElement.scrollTop)
        }
    </script>
</body>
</html>
解释一下上面获取距离的有两种方式：这两种方式是有区别的，第一种方式是HTML5支持的方式，但是必须加上最上面那个代码：<!DOCTYPE html>来声明是HTML5；但是第二种方式是HTML5不支持的，当然你加上了<!DOCTYPE html>这句代码也没用，下面是第二种获得距离的方式和onscroll配合使用：第二种获得距离的方式：（结果在最下面）
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 3000px;
        }
    </style>
</head>
<body>
    <script>
        window.onscroll = function(){
            console.log(document.body.scrollTop)
        }
    </script>
</body>
</html>
下面有一些其他版本的声明方式:

为啥有两种方式呢，因为有些版本的浏览器是不支持HTML5的，所以第二种方式是给那些不支持HTML5的浏览器使用的，为了保险起见或者能适应这个兼容性，我们平时可以按照下面这个办法写：（兼容写法）
console.log(document.documentElement.scrollTop||document.body.scrollTop)
这个代码的含义是：如果不支持第一个就执行第二个，||是or的意思。

最终的结果都是：

获取横向滚动距离：将scrollTop换成scrollLeft即可

console.log(document.documentElement.scrollLeft||document.body.scrollLeft)

（4）回到顶部的方法：scrollTo（）

配合按钮实现一下：方法一：window.scrollTo(0,0)

代码（可复制）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 3000px;
        }
    </style>
</head>
<body>
    <div style="width: 100px;height:300px;"></div>
    <button id="btn">回到顶部</button>
    <script>
        window.onscroll = function(){
            console.log(document.documentElement.scrollTop||document.body.scrollTop)
        }
        btn.onclick = function(){
            //方法一：两个参数一个顶部，一个左边
            window.scrollTo(0,0)

        }
    </script>
</body>
</html>

方法二：对象实现：（将上面方法一改成下面的方法二，其他的不用动）

btn.onclick = function(){
            //方法二:对象
            window.scrollTo({
                left:0,
                top:0
            })
        }

还有一个判断距离的情景：

window.onscroll = function(){
            console.log(document.documentElement.scrollTop||document.body.scrollTop)

            if((document.documentElement.scrollTop||document.body.scrollTop)>100){
                console.log("显示回到顶部按钮")
            }else{
                console.log("隐藏回到顶部按钮")
            }
        }

配合if使用，(document.documentElement.scrollTop||document.body.scrollTop)返回的是一个数值，页面滚上去的距离的数值。

原文链接：https://blog.csdn.net/a1598452168YY/article/details/127331110

THE END

大大搜源码

搜索内容

BOM中innerWidth/innerHeight方法、alter（）、confirm（）、prompt（）、location、onload、onresize、onscroll事件和scrollTo

1、BOM介绍

2、BOM里window对象方法介绍：

3、浏览器的事件：onload事件和onresize事件、onscroll事件和scrollTo（）方法