前端BOM常用操作

devtools/2024/12/23 8:11:02/

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

http://www.ppmy.cn/devtools/120101.html

相关文章

828华为云征文 | 利用FIO工具测试Flexus云服务器X实例存储性能

目录 一、Flexus云服务器X实例概要 1.1 Flexus云服务器X实例摘要 1.2 产品特点 1.3 存储方面性能 1.4 测评服务器规格 二、FIO工具 2.1 安装部署FIO 2.2 主要性能指标概要 三、进行压测 3.1 测试全盘随机读IO延迟 3.2 测试全盘随机写IO延迟 3.3 测试随机读IOPS 3.4…

Git 详细安装教程(详解 Git 安装过程的每一个步骤)

Git 详细安装教程&#xff08;详解 Git 安装过程的每一个步骤&#xff09;_git安装-CSDN博客

科技展厅方案新视角:布局优化促进深度互动体验?

近年来&#xff0c;大多数展厅设计方案开始引用大量的数字技术&#xff0c;来丰富和优化展览的内容形式&#xff0c;而在众多的展厅设计类型中&#xff0c;科技主题无疑成为了当下主流的选择类型之一&#xff0c;它的方案制作也更加注重数字技术&#xff0c;那么&#xff0c;本…

WPF入门教学二十二 多线程与异步编程

在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;多线程和异步编程是非常重要的概念&#xff0c;因为它们可以帮助你创建响应性更好的应用程序。WPF的UI线程负责处理所有的用户界面操作&#xff0c;如果你的代码在UI线程上执行耗时操作&#xff0c…

Android Button “No speakable text present” 问题解决

记录一个问题&#xff0c;今天让同学们做了个小车控制界面&#xff0c;使用Button控件&#xff0c;删除设置的text属性&#xff0c;会出现“No speakable text present”的错误&#xff0c;如图所示。这是由于Android的无障碍设置需要朗读Button的文本&#xff0c;如果没有设置…

JavaScript 可视化案例详解

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

【数据库】sqlite

文章目录 1. 基本概述2. 主要特点3. 应用场景4. 优缺点5. 基本使用示例6. 在编程语言中的使用连接到 SQLite 数据库&#xff08;如果文件不存在会自动创建&#xff09;创建表插入数据提交事务查询数据关闭连接 7. 总结 SQLite 是一个轻量级的关系型数据库管理系统&#xff08;R…

小米2025届软件开发工程师(C/C++/Java)(编程题AK)

选择题好像也是25来个 编程题 T1 题目描述 小明喜欢解决各种数学难题。一天&#xff0c;他遇到了一道有趣的题目:他需要帮助他的朋友们完成一个排序任务。小明得到两个长度为 n 的数组a[]和b[]。他可以在两个数组对应位置进行交换&#xff0c;即选定一个位置 i &#xff0c…