前端BOM操作常用命令详解及代码案例

更新时间：2024年10月26日 11:43:38 作者：TechFrontRunner

浏览器对象模型(BOM)是浏览器提供的JavaScript操作浏览器的API,提供了与网页无关的浏览器功能对象,这篇文章主要给大家介绍了关于前端BOM操作常用命令详解及代码案例的相关资料,需要的朋友可以参考下

前言

BOM（Browser Object Model）是浏览器对象模型，是浏览器提供的JavaScript操作浏览器的API。BOM提供了与网页无关的浏览器的功能对象，虽然没有正式的标准，但现代浏览器已经几乎实现了JavaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。本文将详细介绍BOM操作中的常用命令，并通过代码案例进行解释。

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>
        var on = document.getElementById('on');
        var off = document.getElementById('off');
        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() {}

<!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>
    <img src="图片链接" alt="">
    <script>
        window.onload = function() {
            console.log('资源已经加载完毕');
        }
        window.onresize = function() {
            console.log('可视尺寸改变');
        }
        window.onscroll = function() {
            console.log('滚动条位置改变');
        }
    </script>
</body>
</html>

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

回退页面：window.history.back()
前进页面：window.history.forward()
跳转到指定页面：window.history.go(n)，其中n可以是负数（表示后退）或正数（表示前进）

<!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 onclick="goBack()">回退</button>
    <button onclick="goForward()">前进</button>
    <button onclick="goToPage(-2)">回退两页</button>
    <script>
        function goBack() {
            window.history.back();
        }
        function goForward() {
            window.history.forward();
        }
        function goToPage(n) {
            window.history.go(n);
        }
    </script>
</body>
</html>

6. 浏览器卷去的尺寸和滚动

卷去的高度：document.documentElement.scrollTop 或 window.scrollY
卷去的宽度：document.documentElement.scrollLeft 或 window.scrollX
滚动到指定位置：window.scrollTo(left, top) 或 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>
        var go = document.getElementById('go');
        go.onclick = function() {
            window.scrollTo({left: 300, top: 400, behavior: "smooth"});
        }
    </script>
</body>
</html>

7. Navigator对象

Navigator对象包含有关浏览器的信息。

<!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>
        console.log('浏览器品牌', navigator.appName);
        console.log('浏览器版本', navigator.appVersion);
        console.log('用户代理', navigator.userAgent);
        console.log('操作系统', navigator.platform);
    </script>
</body>
</html>

总结

到此这篇关于前端BOM操作常用命令详解及代码案例的文章就介绍到这了,更多相关前端BOM常用操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript实现两个select下拉框选项左移右移
这篇文章主要介绍了JavaScript实现两个select下拉框选项左移右移功能，js实现下拉框元素互相移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
JS重写Date函数以及兼容IOS系统
这篇文章主要介绍了JS重写Date函数以及兼容IOS系统,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
JS+CSS实现美化的下拉列表框效果
这篇文章主要介绍了JS+CSS实现美化的下拉列表框效果,涉及javascript针对下拉列表框样式的相关操作技巧,非常美观大方,需要的朋友可以参考下
2015-08-08
JavaScript实现一键复制文本功能的示例代码
这篇文章主要为大家介绍两种javascript实现文本复制（将文本写入剪贴板）的方法，文中的示例代码讲解详细，大家可以根据需求特点选用
2023-03-03
JS执行控制之节流模式实例分析
这篇文章主要介绍了JS执行控制之节流模式,结合实例形式分析了节流模式的功能、原理及相关使用方法,需要的朋友可以参考下
2018-12-12
JS+CSS实现带小三角指引的滑动门效果
这篇文章主要介绍了JS+CSS实现带小三角指引的滑动门效果,可实现带有箭头提示效果的滑动门功能,涉及JavaScript动态操作页面元素样式的相关技巧,需要的朋友可以参考下
2015-09-09
js类中的公有变量和私有变量
实例分析js类中的公有和私有变量
2008-07-07
js限制checkbox选中个数以限制六个为例
需要展示多个checkbox复选框，而只能允许最多选6个,下面为大家介绍下如何使用js限制checkbox选中个数,需要的朋友可以参考下
2014-07-07
javascript 包裹节点提高效率
模仿jQuery，创建几个包裹节点的方法，发现jQuery的方法很低效啊，下一次他又可以说这几个方法可以提升了多少多少了。
2010-02-02
js添加元素的简单方式示例
这篇文章主要给大家介绍了关于js添加元素的简单方式,文中通过代码示例将每种实现的方法都介绍的非常详细,对大家学习或者使用js具有一定的参考借鉴价值,需要的朋友可以参考下
2023-10-10