前端学习16 | 常见BOM操作

最新推荐文章于 2024-10-10 13:01:54 发布

printfbaozw

最新推荐文章于 2024-10-10 13:01:54 发布

阅读量395

点赞数

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/printfbaozw/article/details/129478619

版权

本文介绍了BOM（BrowserObjectModel）的基本操作，包括获取浏览器窗口尺寸、使用弹出层（alert、confirm、prompt）、控制标签页开关、处理浏览器历史记录、以及卷去尺寸和滚动定位的方法。通过实例代码展示了这些功能的实现，帮助读者理解并掌握BOM的相关操作。

摘要由CSDN通过智能技术生成

前言

接下来我们将讲解BOM的一些操作。

一、什么是BOM操作

BOM全称“Browser Object Model”，是一整套操作浏览器相关内容的属性和方法。

二、使用步骤

1.获取浏览器的窗口尺寸

获取可视窗口宽度：window.innerWidth
获取可视窗口高度：window.innerHeight

代码如下：

<!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>
</head>
<body>
    <script>
        var m1 = window.innerWidth
        var m2 = window.innerHeight
        console.log(m1);
        console.log(m2)
    </script>
</body>
</html>

运行结果为：
在这里插入图片描述

2.浏览器的弹出层

提示框：window.alert(‘提示信息’)
询问框：window.confirm(‘提示信息’)
输入框：window.prompt(‘提示信息’)

代码如下：

<!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>
</head>
<body>
    <script>
        //window.alert('你好！')

        // var res = window.confirm('你好吗？')
        // console.log(res)

        var res2 = window.prompt('你是哪个省的？')
        console.log(res2)
    </script>
</body>
</html>

这里只演示第三种，其他两种情况可以去掉注释查看。
运行结果为：
在这里插入图片描述
这时我们输入值，会返回在我们的控制台。

3.开启和关闭标签页

开启：window.open( ’ 地址 ’ )
关闭：window.close( )

示例代码如下：

<!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>
</head>
<body>
    <button id="on"> 开启 </button>
    <button id="off"> 关闭 </button>
    <script>
        on.onclick = function()
        {
            window.open('https://www.baidu.com/')
        }
        off.onclick = function()
        {
            window.close()
        }
    </script>
</body>
</html>

运行后我们可以看到：
在这里插入图片描述
单击开启，就可以跳转到对应网页，关闭就可以退出该页面。

4.浏览器常见事件

资源加载完毕 : window.onload = function () {}
可视尺寸改变 : window.onresize = function () {}
滚动条位置改变: window.onscroll = function () {}

代码为：

<body>
    <img src="图片链接" alt="">

    <script>
        window.onload = function(){
            console.log('资源已经加载完毕')
        }
    </script>
</body>

运行后，我们需调节控制台：
在这里插入图片描述
将网络改为3g，运行后，我们就可以看到：

其他两个不做展示，用法相似。

5. 浏览器的历史记录操作

回退页面：window.history.back()
前进页面 : window.history.forward()

相当于浏览器自带的前进后退。

6. 浏览器卷去的尺寸

卷去的高度：document.documentElement.scrollTop 或者 document.body.scrollTop
卷去的宽度：document.documentElement.scrollLeft 或者 document.body.scrollLeft

当代码中有< !DOCTYPE html >时，使用第一个，没有时使用第二个。

7. 浏览器滚动到

滚动到 : window.scrollTo()

参数方式 1 : window.scrollTo( left，top )
left :浏览器卷去的宽度
top : 浏览器卷去的高度
参数方式 2 : window.scrollTo( {
left: xx,
top: yy,
behavior:‘smooth’
}）

代码如下：

<!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{
            width: auto;
            height: 3000px;
        }
        button{
            position: fixed;
            bottom: 50px;
            right: 50px;
        }
    </style>
</head>
<body>
    <button id="go">传送</button>
    <script>
        go.onclick = function()
        {
            window.scrollTo({
                left:300,
                top:400,
                behavior:"smooth"
            })
        }
    </script>
</body>
</html>