前端BOM常用操作

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

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

1. 获取浏览器窗口尺寸
  • 获取可视窗口宽度window.innerWidth
  • 获取可视窗口高度window.innerHeight
html 复制代码
<!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('提示信息', '默认值')
html 复制代码
<!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()
html 复制代码
<!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() {}
html 复制代码
<!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可以是负数(表示后退)或正数(表示前进)
html 复制代码
<!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.scrollTopwindow.scrollY
  • 卷去的宽度document.documentElement.scrollLeftwindow.scrollX
  • 滚动到指定位置window.scrollTo(left, top)window.scrollTo({left: xx, top: yy, behavior: 'smooth'})
html 复制代码
<!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>

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

html 复制代码
<!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>
相关推荐
盛夏绽放9 分钟前
Excel导出实战:从入门到精通 - 构建专业级数据报表的完整指南
开发语言·javascript·excel·有问必答
Mintopia11 分钟前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia14 分钟前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
liliangcsdn29 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero32 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui36 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
挽淚38 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴39 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte42 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常44 分钟前
网页视频录制新技巧,代码实现超简单!
前端