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

前端BOM常用操作

news 文章来源：https://blog.csdn.net/qq_63447955/article/details/142674921 2024/11/16 20:40:50

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&#xff08;Browser Object Model&#xff09;是浏览器对象模型&#xff0c;是浏览器提供的JavaScript操作浏览器的API。BOM提供了与网页无关的浏览器的功能对象&#xff0c;虽然没有正式的标准&#xff0c;但现代浏览器已经几乎实现了Java…...

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

【Go】-viper库的使用

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

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

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

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

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

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

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

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

python画图|自制渐变柱状图

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

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

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

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

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

K8S部署流程

一、war打包镜像(survey,analytics,trac系统) 代码打包成war准备tomcat的server.xml文件&#xff0c;修改connector中8080端口为项目的端口 修改前&#xff1a; <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&#xff0c;它们使您和最终用户能够添加或删除数据行。您将首选学习如何启用内置的数据导航器&#xff0c;然后学习如何使用Microsoft Outlook启发的New Item行添加新记录。最后教程将向您展示基本的API&#xff0c;它…...

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

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

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

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

深度学习·Argparse

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

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

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

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

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

http协议中的header详细讲解

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

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

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

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

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

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

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

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

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

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

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

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

《VBA数据库解决方案》教程&#xff08;版权10090845&#xff09;是我推出的第二套教程&#xff0c;目前已经是第二版修订了。这套教程定位于中级&#xff0c;是学完字典后的另一个专题讲解。数据库是数据处理的利器&#xff0c;教程中详细介绍了利用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自身的版本下载慢 解决办法&#xff1a;修改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实现省-市-区/县级联

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

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

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

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

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

CSS中height设置100vh和100%的区别

文章目录 CSS中height设置100vh和100%的区别一、引言二、高度设置的区别1、100%1.1、父元素高度固定1.2、父元素高度未定义 2、100vh2.1、视口高度2.2、不受父元素限制 三、总结 CSS中height设置100vh和100%的区别 一、引言 在前端开发中&#xff0c;我们经常需要设置元素的高…...

编程日记 2024/10/1 22:24:11

红米k60至尊版工程固件 MTK芯片 资源预览 刷写说明 与nv损坏修复去除电阻图示

红米k60至尊版机型代码为：corot。 搭载了联发科天玑9200+处理器。此固件mtk引导为MT6985。博文将简单说明此固件的一些特点与刷写注意事项。对于NV损坏的机型。展示修改校验电阻的图示。方便改写参数等 通过博文了解 1💝💝💝-----此机型工程固件的资源刷写注意事项 2…...

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

QEMU使用Qemu-Guest-Agent传输文件、执行指令等

简介 之前介绍过qemu传输文件&#xff0c;使用的挂载 / samba方式 &#xff1a;Qemu和宿主机不使用外网进行文件传输。 这是一种方式&#xff0c;这里还有另一种方式&#xff1a;使用Qemu-Guest-Agent&#xff0c;后面简称qga。 官网介绍&#xff1a;https://www.qemu.org/d…...

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

【漏洞复现】金和OA C6 GeneralXmlhttpPage.aspx Sql注入漏洞

免责声明： 本文旨在提供有关特定漏洞的信息，以帮助用户了解潜在风险。发布此信息旨在促进网络安全意识和技术进步，并非出于恶意。读者应理解，利用本文提到的漏洞或进行相关测试可能违反法律或服务协议。未经授权访问系统、网络或应用程序可能导致法律责任或严重后果…...

编程日记 2024/10/1 22:20:06

复数表示的电场

Exm加是复振幅&#xff0c;这是用复数表示电场&#xff0c;并提取只与空间有关的项复振幅就是复数表示电场&#xff0c;且把与空间xyz有关的量提取出来 经过验证实数E0cos&#xff08;wtδx&#xff09;对t求导&#xff0c;等于E0e^j(wtδx)对t求导再取实部 实数表示电磁波cos…...

编程日记 2024/10/1 22:19:05

常用快捷键整理

用加粗标注的是我个人使用时常用的&#xff0c;其实这个全凭个人喜好&#xff0c;大家可以熟悉一下自己喜欢的&#xff0c;都多试试&#xff0c;把觉得有用的记一下&#xff0c;多使用&#xff0c;后续写代码效率就会提高一些) 常用 VS 运行调试程序快捷键 编译 . 编译程序&a…...

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

【Transformer】长距离依赖

在自然语言处理&#xff08;NLP&#xff09;中&#xff0c;长距离依赖&#xff08;Long-Range Dependencies&#xff09;指的是在文本中相隔较远的两个或多个元素之间的依赖关系。这些依赖关系可以是语法上的&#xff0c;也可以是语义上的。例如&#xff0c;在句子中&#xff0…...

编程日记 2024/10/1 22:12:58

Git傻傻分不清楚（下）

进入Idea编译器 File -> New -> Project from Version Control -> URL (这个路径是要拉取项目的Github路径哦~) 设置成maven项目...

编程日记 2024/10/1 22:11:57

golang学习笔记27-反射【重要】

本节也是GO核心部分&#xff0c;很重要。包括基本类型的反射&#xff0c;结构体类型的反射&#xff0c;类别方法Kind()&#xff0c;修改变量的值。 目录 一、概念&#xff0c;基本类型的反射二、结构体类型的反射三、类别方法Kind()四、修改变量的值 一、概念&#xff0c;基本…...

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

利用Puppeteer-Har记录与分析网页抓取中的性能数据

引言 在现代网页抓取中&#xff0c;性能数据的记录与分析是优化抓取效率和质量的重要环节。本文将介绍如何利用Puppeteer-Har工具记录与分析网页抓取中的性能数据&#xff0c;并通过实例展示如何实现这一过程。 Puppeteer-Har简介 Puppeteer是一个Node.js库&#xff0c;提供…...

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

网站建设模板源码/九易建网站的建站模板

所以&#xff1a;D 110-131(-21)10FFEDH(补码)故&#xff1a;转移转移指令第二字节为&#xff1a;EBH,第三字节为&#xff1a;FFH。5.7 某计算机有变址、间接和相对等三种寻址方式&#xff0c;设指令由操作码、寻址方式特征位和地址码三部分组成&#xff0c;且为单字长指令。设…...

编程日记 2024/11/16 19:47:29

新闻资讯平台有哪些/北京seo结算

虽然目前的linux已经能自动选择最快的源&#xff0c;但是官方提供的镜像列表仍然较少&#xff0c;速度虽有所提升但是整体依然较慢&#xff0c;阿里的源作为国内最快的源却没有被纳入官方提供的源中 国内常使用的源有阿里&#xff0c;中科大&#xff0c;清华&#xff0c;网易源…...

编程日记 2024/11/16 19:04:42

大学科技园网站建设/网络营销课程培训课程

在上面几篇文章中&#xff0c;我们介绍了Grafana的安装配置以及运行的方法&#xff0c;本篇文章我们就来介绍下Grafana的基本概念。一、Data Source — 数据源 Grafana支持多种不同的时序数据库数据源&#xff0c;Grafana对每种数据源提供不同的查询方法&#xff0c;而且能很好…...

编程日记 2024/11/16 17:26:06

网站空间与服务器的区别/实体店怎么引流推广

流量控制 流量限制 (rate-limiting)&#xff0c;它可以用来限制客户端在指定时间内 HTTP 请求的数量。请求可以是GET 请求&#xff0c;也可以是登录表单的 POST 请求。流量限制可以用作安全目的&#xff0c;如减慢暴力密码破解速率等。通过将传入请求的速率限制为真实用户的典型…...

编程日记 2024/11/16 16:40:33

女教师网课入侵录屏 /seo教程之关键词是什么

第三章 日子过得就像那些不眠的晚上&#xff0c;她嚼着口香糖对墙满谈着理想。——————赵雷《成都》 NOIP过后我认识到了自己有多么菜&#xff0c;我换了座&#xff0c;到了靠窗户那排。 大王开始给我们介绍一些高端算法&#xff0c;那些日子都是在luogu试炼场刷动态规划&a…...

编程日记 2024/11/16 9:05:18

以前做视频的网站/seo优化公司如何做

我们项目springcloud feignribbonconsulzuul,正常的点击访问没有问题&#xff0c;当进行jemeter压力测试的时候&#xff0c;一旦并发上去&#xff0c;访问此时超过100多万以后&#xff0c;就会出现以下错误&#xff1a;Caused by: feign.RetryableException: Read timed out e…...

编程日记 2024/11/16 3:56:24