当前位置：首页 > news >正文

前端BOM常用操作

news 2026/3/28 9:10:16

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操作常用命令详解及代码案例 BOM（Browser Object Model）是浏览器对象模型，是浏览器提供的JavaScript操作浏览器的API。BOM提供了与网页无关的浏览器的功能对象，虽然没有正式的标准，但现代浏览器已经几乎实现了Java…...

编程日记 2024/10/1 22:56:42

【Go】-viper库的使用

目录 viper简介 viper使用通过viper.Set设置值读取配置文件说明读取配置文件读取多个配置文件读取配置项的值读取命令行的值 io.Reader中读取值写配置文件 WriteConfig() 和 SafeWriteConfig() 区别: viper简介配置管理解析库，是由大神 Steve Fr…...

编程日记 2024/10/1 22:53:39

JavaWeb酒店管理系统（详细版）

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...

编程日记 2024/10/1 22:52:38

C++ | 定长内存池 | 对象池

文章目录 C | 定长内存池 | 对象池一、内存池的引入二、代码中的内存池实现 - ObjectPool类（一）整体结构（二）内存分配 - New函数（三）内存回收 - Delete函数三、内存池在TreeNode示例中的性能测试演示四、脱…...

编程日记 2024/10/1 22:50:36

python画图|自制渐变柱状图

在前述学习过程中，我们已经通过官网学习了如何绘制渐变的柱状图及其背景。掌握一门技能的最佳检验方式就是通过实战，因此，本文尝试做一些渐变设计。前述学习记录可查看链接： Python画图|渐变背景-CSDN博客【1】柱状图渐变 …...

编程日记 2024/10/1 22:49:35

基于RPA+BERT的文档辅助“悦读”系统 | OPENAIGC开发者大赛高校组AI创作力奖

在第二届拯救者杯OPENAIGC开发者大赛中，涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到，我们特意开设了优秀作品报道专栏，旨在展示其独特之处和开发者的精彩故事。无论您是技术专家还是爱好者，希望能带给…...

编程日记 2024/10/1 22:48:34

K8S部署流程

一、war打包镜像(survey,analytics,trac系统) 代码打包成war准备tomcat的server.xml文件，修改connector中8080端口为项目的端口修改前： <Connector port"8080" protocol"HTTP/1.1"connectionTimeout"20000"redirect…...

编程日记 2024/10/1 22:45:31

DevExpress WinForms中文教程：Data Grid - 如何添加或删除行？

本教程介绍DevExpress WinForm的Data Grid控件UI元素和API，它们使您和最终用户能够添加或删除数据行。您将首选学习如何启用内置的数据导航器，然后学习如何使用Microsoft Outlook启发的New Item行添加新记录。最后教程将向您展示基本的API，它…...

编程日记 2024/10/1 22:42:29

u盘格式化后数据能恢复吗？2024年Top4恢复神器来帮忙

在这个电脑和手机满天飞的时代，U盘是我们用来存东西和传文件的得力助手，特别重要。但是，有时候U盘可能会不小心被格式化了，里面的重要文件就不见了。那么，U盘格式化后的数据还能恢复吗？当然可以。今天会告诉…...

编程日记 2024/10/1 22:41:28

深度学习·Argparse

Argparse 命令行选项、参数和子命令解析器 ArgumentParser 命令行传参数->解析参数->获得对应参数初始化：parser argparse.ArgumentParser(descriptionxxx)添加命令行参数： parser.add_argument("--training_filepath", typestr, he…...

编程日记 2024/10/1 22:40:27

制造企业为何需要PLM系统？PLM系统解决方案对制造业重要性分析

制造企业为何需要PLM系统？PLM系统解决方案对制造业重要性分析新华社9月23日消息，据全国组织机构统一社会信用代码数据服务中心统计，我国制造业企业总量突破600万家。数据显示，2024年1至8月，我国制造业企业数量呈现稳…...

编程日记 2024/10/1 22:39:26

http协议中的header详细讲解

http协议中的header详细讲解 HTTP 协议和 TCP/IP 协议族内的其他众多的协议相同，用于客户端和服务器之间的通信。请求访问文本或图像等资源的一端称为客户端，而提供资源响应的一端称为服务器端。 HTTP 协议规定，请求从客户端发出&#xf…...

编程日记 2024/10/1 22:38:25

探索后量子安全：基于格加密技术的未来密码学展望

在信息技术日新月异的今天，量子计算作为下一代计算技术的代表，正逐步从理论走向实践。量子计算的出现对现有的加密体系构成了严重威胁，尤其是基于大数分解和离散对数难题的传统密码学（如RSA和Diffie-Hellman协议）。为了…...

编程日记 2024/10/1 22:37:23

WPF之UI进阶--完整了解wpf的控件和布局容器及应用

前面三篇有关WPF的基础介绍，分别介绍了wpf与winform的异同，wpf的事件生成和使用以及数据绑定。但我们还缺乏一副好的“皮囊”，所以从这篇开始我们来开始学习wpf的UI相关的内容，首当其冲的就是布局容器。其实我们知道，…...

编程日记 2024/10/1 22:36:23

unity一键注释日志和反注释日志

开发背景：游戏中日志也是很大的开销，虽然有些日志不打印但是毕竟有字符串的开销，甚至有字符串拼接的开销，有些还有装箱和拆箱的开销，比如Debug.Log(1) 这种因此需要注释掉，当然还需要提供反注释的功能&am…...

编程日记 2024/10/1 22:35:22

VBA数据库解决方案第十五讲：Recordset集合中单个数据的精确处理

《VBA数据库解决方案》教程（版权10090845）是我推出的第二套教程，目前已经是第二版修订了。这套教程定位于中级，是学完字典后的另一个专题讲解。数据库是数据处理的利器，教程中详细介绍了利用ADO连接ACCDB和EXCEL的方法…...

编程日记 2024/10/1 22:34:21

甄选范文“论软件需求管理”，软考高级论文，系统架构设计师论文

论文真题软件需求管理是一个对系统需求变更了解和控制的过程。需求管理过程与需求开发过程相互关联，初始需求导出的同时就要形成需求管理规划，一旦启动了软件开发过程，需求管理活动就紧密相伴。需求管理过程中主要包含变更控制、版本控制、需求跟踪和需求状态跟踪等4项活…...

编程日记 2024/10/1 22:30:18

Android Studio Dolphin 中Gradle下载慢的解决方法

我用的版本Android Studio Dolphin | 2021.3.1 Patch 1 1.Gradle自身的版本下载慢解决办法：修改gradle\wrapper\gradle-wrapper.properties中的distributionUrl 将https\://services.gradle.org/distributions为https\://mirrors.cloud.tencent.com/gradle dis…...

编程日记 2024/10/1 22:29:16

Excel实现省-市-区/县级联

数据准备准备省份-城市映射数据，如下： 新建sheet页，命名为：省-市数据源，然后准备数据，如下所示： 准备城市-区|县映射数据，如下： 新建sheet页，命名为&#x…...

编程日记 2024/10/1 22:27:15

【优化代码结构】函数的参数归一化

某些封装的函数，其参数具有多样性，会导致函数中会增加非常多的分支，比如下面这个 format 函数有如下几种参数方式，其中 formatter 会有很多种情况 date：日期对象formatter： ‘date’：格式化日期…...

编程日记 2024/10/1 22:26:13

Apifox 实战：从实体类到请求参数的自动化转换技巧

1. 为什么需要实体类到请求参数的自动化转换每次对接新接口时最头疼的事情是什么？对我来说就是手动编写那一大堆请求参数。上周接手一个用户管理模块，光是用户信息更新接口就有23个字段，如果每个字段都要手动填写参数名、类型、说明&#xf…...

编程新知 2026/3/28 8:57:59

实时手机检测-通用企业应用案例：手机回收站自动分拣系统集成

实时手机检测-通用企业应用案例：手机回收站自动分拣系统集成 1. 引言：当手机回收遇上AI，效率革命正在发生想象一下，一个大型的手机回收处理中心，每天要处理成千上万部来自不同渠道的旧手机。工人们需要手动将手机从…...

编程新知 2026/3/28 8:45:57

OpenClaw高消耗场景优化：Qwen3-32B私有镜像成本实测

OpenClaw高消耗场景优化：Qwen3-32B私有镜像成本实测 1. 问题背景与测试动机最近在尝试用OpenClaw自动化处理我的日常工作流时，发现一个令人头疼的问题：长链条任务的Token消耗简直像开了水龙头一样。最夸张的一次，一个简单的&qu…...

编程新知 2026/3/28 8:01:33

FlowState Lab知识图谱构建应用：从非结构化文本中抽取实体与关系

FlowState Lab知识图谱构建应用：从非结构化文本中抽取实体与关系 1. 知识图谱构建的行业痛点在信息爆炸的时代，企业每天都要处理海量的非结构化数据——技术文档、行业报告、会议记录、客户反馈等等。这些数据中蕴含着大量有价值的知识，但…...

编程新知 2026/3/28 7:53:23

2025年阿里云幻兽帕鲁联机服务器极速搭建指南

1. 为什么选择阿里云搭建幻兽帕鲁服务器？ 最近很多朋友问我，为什么非要选择阿里云来搭建幻兽帕鲁的联机服务器？作为一个从游戏测试阶段就开始折腾服务器搭建的老玩家，我总结了几个关键原因。首先，阿里云的游戏服务器专…...

编程新知 2026/3/28 6:58:53

Unity游戏开发实战：用三阶贝塞尔曲线为你的角色设计一条丝滑的移动路径（附完整C#脚本）

Unity游戏开发实战：三阶贝塞尔曲线打造丝滑角色移动路径想象一下，你的游戏角色需要完成一个优雅的空中翻转动作，或者赛车需要在弯道实现完美漂移轨迹。这些令人惊叹的运动效果背后，往往隐藏着一条看不见的数学曲线——贝塞尔曲线…...

编程新知 2026/3/28 6:56:52

CogVideoX-2b效果实测：中文vs英文提示词生成质量差异分析

CogVideoX-2b效果实测：中文vs英文提示词生成质量差异分析 1. 引言：当AI导演遇到不同语言想象一下，你有一个能听懂你说话、并把你描述的场景变成视频的AI导演。你告诉它：“一个宇航员在月球上漫步，远处是蓝色的地球。…...

编程新知 2026/3/28 6:38:48

DAMO-YOLO实战：用AI视觉系统做内容安全审核与统计

DAMO-YOLO实战：用AI视觉系统做内容安全审核与统计 1. 引言：当AI视觉遇见内容安全在数字内容爆炸式增长的今天，如何高效地进行内容审核成为许多平台面临的挑战。传统人工审核不仅效率低下，而且容易因疲劳导致误判。本文将介绍如…...

编程新知 2026/3/28 6:14:30

WordPress建站避坑指南：Ubuntu服务器常见权限问题与安全配置

WordPress建站避坑指南：Ubuntu服务器常见权限问题与安全配置引言：为什么你的WordPress网站总出问题？ 每次看到新手开发者兴奋地宣布"我的WordPress网站上线了"，我都忍不住想问：你真的检查过文件权限了吗&am…...

编程新知 2026/3/28 6:02:28

人工智能|大模型 —— 量化 —— 一文搞懂大模型量化技术：GGUF、GPTQ、AWQ

目前关于大模型量化技术的文章层出不穷，但对其理论部分的深入探讨却相对较少。本文将对大模型量化技术进行系统性的介绍，并重点聚焦于理论层面的深入解析。一、大模型量化基础大模型量化的核心在于将模型参数的精度从较高的位宽（bit-width…...

编程新知 2026/3/28 4:58:17