【前端基础篇】JavaScript之BOM介绍

2024-08-26 10:20

本文主要是介绍【前端基础篇】JavaScript之BOM介绍,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 浏览器对象模型(BOM)介绍
    • 1. 什么是BOM?
    • 2. Window 对象
      • 2.1 弹出框
        • 2.1.1 警告框
        • 2.1.2 确认框
        • 2.1.3 提示框
      • 2.2 定时事件
        • 2.2.1 延时器
        • 2.2.2 定时器
      • 2.3 Window 对象其他常用属性与方法
        • 2.3.1 获取窗口尺寸
        • 2.3.2 打开新窗口与关闭窗口
        • 2.3.3 移动与调整窗口大小
    • 3. Navigator 对象
      • 3.1 判断浏览器类型
      • 3.2 navigator对象及方法
        • 详细解释:
    • 4. Location 对象
      • 4.1 常用属性
      • 4.2 页面跳转与刷新
      • 4.3 URL 替换
      • 4.4 Location常用对象和方法
        • 详细解释:
    • 5. History 对象
      • 5.1 前进与后退
      • 5.2 获取历史记录长度
      • 5.3 history对象常用属性方法
        • 详细解释:
    • 6. Screen 对象
      • 6.1 获取屏幕尺寸
    • 7. 综合应用案例
      • 7.1 延时操作与窗口管理
    • 结论

浏览器对象模型(BOM)介绍

浏览器对象模型(BOM)为JavaScript提供了与浏览器对话的能力。

尽管BOM没有正式的标准,但现代浏览器已经实现了相同的JavaScript交互方法和属性。

BOM提供了一组对象,用于操作浏览器窗口、导航历史记录、获取浏览器和屏幕信息等。

1. 什么是BOM?

BOM使JavaScript能够与浏览器进行交互,而不仅仅是操作网页内容。它包括多个对象,最常用的有:

  • Window:代表整个浏览器窗口,也是JavaScript全局对象的代名词。
  • Navigator:提供有关浏览器的信息,如用户代理、浏览器版本等。
  • Location:包含当前URL信息,并可用于页面跳转等操作。
  • History:用于操作浏览器的会话历史记录,例如前进、后退。
  • Screen:提供有关用户屏幕的详细信息。

这些对象在window对象中作为其属性存在,因此可以通过window对象来访问它们,也可以直接使用它们的名称


2. Window 对象

window对象是BOM中最核心的对象,代表浏览器窗口。它是全局对象,所有全局变量、函数、对象都自动成为window对象的属性和方法。

2.1 弹出框

方法/属性描述示例代码
window.alert()显示一个警告对话框。window.alert("这是一个警告对话框!");
window.confirm()显示一个带有消息和两个按钮的确认对话框。if (window.confirm("你确定要继续吗?")) { console.log("用户点击了确定"); } else { console.log("用户点击了取消"); }
window.prompt()显示一个带有消息的提示对话框,提示用户输入信息。var name = window.prompt("请输入你的名字:", "张三"); console.log("用户输入的名字是:" + name);
2.1.1 警告框

警告框(Alert)用于向用户传达信息,用户需单击“确定”以继续操作。

window.alert("这是一个警告框!");
2.1.2 确认框

确认框(Confirm)用于让用户验证或接受某些信息。用户单击“确定”或“取消”后,将返回truefalse

var result = window.confirm("请按按钮");
if (result) {console.log("您按了确认!");
} else {console.log("您按了取消!");
}
2.1.3 提示框

提示框(Prompt)用于在用户进入页面前输入值。返回值是用户输入的字符串或null

var name = window.prompt("请输入您的姓名", "张三");
if (name !== null) {console.log("您好," + name + "!");
}

2.2 定时事件

2.2.1 延时器

setTimeout() 方法在指定的时间延迟后执行一次指定的函数。

window.setTimeout(function () {console.log("Hello, after 3 seconds!");
}, 3000);
2.2.2 定时器

setInterval() 方法按指定的时间间隔重复执行指定的函数。

window.setInterval(function () {console.log("Hello, every second!");
}, 1000);

2.3 Window 对象其他常用属性与方法

属性/方法描述示例代码
window.alert()显示一个警告框,用户点击“确定”后关闭。window.alert("这是一个警告框!");
window.confirm()显示一个确认框,用户点击“确定”返回true,点击“取消”返回false。window.confirm("您确认吗?");
window.prompt()显示一个提示框,要求用户输入信息,返回输入值或null。window.prompt("请输入您的名字:");
window.setTimeout()在指定的时间后执行一个函数,仅执行一次。window.setTimeout(function() {}, 1000);
window.setInterval()每隔指定的时间间隔重复执行一个函数。window.setInterval(function() {}, 1000);
window.innerHeight返回浏览器窗口的内部高度(以像素为单位)。console.log(window.innerHeight);
window.innerWidth返回浏览器窗口的内部宽度(以像素为单位)。console.log(window.innerWidth);
2.3.1 获取窗口尺寸

可以使用以下属性来确定浏览器窗口的尺寸(以像素为单位)。

var width = window.innerWidth;
var height = window.innerHeight;
console.log("窗口宽度:" + width + ",高度:" + height);
2.3.2 打开新窗口与关闭窗口

window.open() 用于打开一个新窗口,而window.close() 用于关闭当前窗口。

var myWindow = window.open("https://www.example.com", "_blank", "width=500,height=500");
// 关闭窗口
myWindow.close();
2.3.3 移动与调整窗口大小

使用window.moveTo()window.resizeTo() 可以移动或调整当前窗口的大小。

myWindow.moveTo(300, 200);
myWindow.resizeTo(800, 600);

3. Navigator 对象

navigator对象提供关于浏览器的详细信息,例如浏览器类型、版本、操作系统等。最常用的属性是navigator.userAgent,它包含了浏览器的用户代理字符串。

属性/方法描述示例代码
navigator.userAgent返回浏览器的用户代理字符串。console.log("用户代理是:" + navigator.userAgent);
navigator.language返回浏览器的语言。console.log("浏览器语言是:" + navigator.language);

3.1 判断浏览器类型

通过分析navigator.userAgent字符串,可以识别用户使用的浏览器类型。

var ua = navigator.userAgent;
if (/firefox/i.test(ua)) {console.log("您正在使用火狐浏览器");
} else if (/chrome/i.test(ua)) {console.log("您正在使用谷歌浏览器");
} else if (/msie/i.test(ua) || "ActiveXObject" in window) {console.log("您正在使用IE浏览器");
} else {console.log("您使用的浏览器未能识别");
}

3.2 navigator对象及方法

属性/方法描述示例代码
navigator.userAgent返回包含浏览器用户代理字符串的信息,该字符串可以用于识别浏览器类型。console.log(navigator.userAgent);
navigator.language返回浏览器的语言设置,通常为语言代码,如 "en-US"console.log(navigator.language);
navigator.platform返回运行浏览器的操作系统平台的信息,如 "Win32""MacIntel"console.log(navigator.platform);
navigator.onLine返回一个布尔值,表示浏览器是否在线。console.log(navigator.onLine);
navigator.cookieEnabled返回一个布尔值,表示浏览器是否启用了cookie。console.log(navigator.cookieEnabled);
navigator.javaEnabled()返回一个布尔值,表示浏览器是否启用了Java。console.log(navigator.javaEnabled());
navigator.geolocation提供访问设备地理位置信息的方法和属性。navigator.geolocation.getCurrentPosition(success, error);
详细解释:
  • navigator.userAgent: 用于识别用户浏览器的详细信息,这对于特定浏览器的兼容性处理非常有用。

  • navigator.language: 返回用户设置的语言,这对于多语言支持的应用程序非常有用。

  • navigator.platform: 提供有关操作系统的信息,通常用于判断应用在不同平台上的行为差异。

  • navigator.onLine: 通过检查网络连接状态,可以实现基于网络状态的应用程序逻辑,比如在离线状态下禁用某些功能。

  • navigator.cookieEnabled: 检查浏览器是否支持和启用了Cookie,很多用户体验相关的操作依赖于Cookie的使用。

  • navigator.javaEnabled(): 虽然Java Applets已经很少使用,但这个方法仍可以用来检查浏览器是否启用了Java。

  • navigator.geolocation: 通过Geolocation API获取用户的地理位置信息,用于基于位置的服务和应用。


4. Location 对象

location对象包含当前URL的信息,并允许你操作浏览器跳转页面、重新加载页面等。

4.1 常用属性

console.log(location.href);     // 完整URL
console.log(location.protocol); // 协议(如http或https)
console.log(location.host);     // 主机(包括端口号)
console.log(location.pathname); // 路径
console.log(location.search);   // 查询字符串

4.2 页面跳转与刷新

使用location.assign()或直接设置location.href可以跳转到一个新页面,而使用location.reload()可以刷新当前页面。

location.href = "https://www.example.com";  // 跳转
location.reload();  // 刷新

4.3 URL 替换

使用location.replace()可以替换当前页面,并不会在历史记录中保留之前的页面。

location.replace("https://www.example.com");

4.4 Location常用对象和方法

属性/方法描述示例代码
location.href返回当前页面的完整URL,或设置新URL并跳转。console.log(location.href);
location.protocol返回当前页面使用的协议(如http:或https:)。console.log(location.protocol);
location.host返回主机名和端口号。console.log(location.host);
location.pathname返回URL路径部分。console.log(location.pathname);
location.search返回URL中?之后的查询字符串。console.log(location.search);
location.hash返回URL中#号后面的部分(锚点)。console.log(location.hash);
location.assign()加载指定的URL。location.assign("https://www.example.com");
location.reload()重新加载当前页面。location.reload();
location.replace()替换当前页面,不会生成历史记录。location.replace("https://www.example.com");
详细解释:
  • location.href: 用于获取或设置当前页面的完整URL。通过修改href,可以实现页面跳转。

  • location.protocol: 获取当前页面使用的协议,如http:https:,这对于在不同协议下执行特定操作非常有用。

  • location.host: 获取当前页面的主机名和端口号,例如www.example.com:80

  • location.pathname: 返回URL的路径部分,不包含主机名和查询字符串。

  • location.search: 获取URL中?后面的查询字符串,通常用于获取查询参数。

  • location.hash: 获取URL中的锚点部分,即#后面的字符串,常用于页面内导航。

  • location.assign(): 加载一个新的URL,与直接设置location.href类似,但不会刷新页面。

  • location.reload(): 重新加载当前页面,类似于用户点击浏览器的刷新按钮。可以通过传递true强制从服务器重新加载。

  • location.replace(): 用一个新的URL替换当前页面,不会在浏览器的历史记录中生成条目。


5. History 对象

history对象用于操作浏览器的会话历史记录。你可以使用它来控制浏览器的前进、后退操作。

5.1 前进与后退

history.back();   // 后退到上一个页面
history.forward(); // 前进到下一个页面

5.2 获取历史记录长度

history.length属性可以返回当前会话的历史记录长度。

console.log("历史记录条目数:" + history.length);

5.3 history对象常用属性方法

属性/方法描述示例代码
history.length返回浏览器历史记录的长度,即用户在当前会话中访问的URL数。console.log(history.length);
history.back()加载历史记录中的前一个URL,与浏览器的“后退”按钮功能相同。history.back();
history.forward()加载历史记录中的下一个URL,与浏览器的“前进”按钮功能相同。history.forward();
history.go(n)加载历史记录中的特定页面。n为相对位置,负数表示后退,正数表示前进。history.go(-1); // 后退1页
history.pushState()将URL添加到历史记录中,但不会重新加载页面。history.pushState({page: 1}, "title", "?page=1");
history.replaceState()修改当前历史记录条目的URL,但不会重新加载页面。history.replaceState({page: 2}, "title", "?page=2");
详细解释:
  • history.length: 返回当前会话中的历史记录条目数,包括当前页面。这对于判断是否可以后退或前进很有用。

  • history.back(): 作用等同于点击浏览器的“后退”按钮,用户会返回到前一个页面。

  • history.forward(): 作用等同于点击浏览器的“前进”按钮,用户会前往下一个页面。

  • history.go(n): 通过相对位置跳转到历史记录中的某个页面。n为负数表示向后跳转,为正数表示向前跳转。

  • history.pushState(): 添加一个新的历史记录条目,常用于单页应用程序(SPA)中更新URL而不刷新页面。

  • history.replaceState(): 替换当前的历史记录条目,类似于pushState(),但不会创建新的记录条目。


6. Screen 对象

screen对象提供用户屏幕的相关信息,如屏幕的宽度、高度、可用宽度和可用高度等。

属性描述示例代码
screen.width返回屏幕的宽度。console.log("屏幕宽度:" + screen.width);
screen.height返回屏幕的高度。console.log("屏幕高度:" + screen.height);
screen.availWidth返回屏幕的可用宽度(排除任务栏)。console.log("可用屏幕宽度:" + screen.availWidth);
screen.availHeight返回屏幕的可用高度(排除任务栏)。console.log("可用屏幕高度:" + screen.availHeight);

6.1 获取屏幕尺寸

console.log("屏幕宽度:" + screen.width);
console.log("屏幕高度:" + screen.height);
console.log("可用屏幕宽度:" + screen.availWidth);
console.log("可用屏幕高度:" + screen.availHeight);

7. 综合应用案例

7.1 延时操作与窗口管理

下面是一个综合示例,展示了如何使用BOM对象来创建一个自动打开、移动并关闭的窗口。

// 打开新窗口
var newWindow = window.open("https://www.example.com", "_blank", "width=200,height=200");// 2秒后将窗口移动到屏幕的右下角
setTimeout(function() {newWindow.moveTo(screen.availWidth - 200, screen.availHeight - 200);
}, 2000);// 5秒后调整窗口大小
setTimeout(function() {newWindow.resizeTo(500, 500);
}, 5000);// 10秒后关闭窗口
setTimeout(function() {newWindow.close();
}, 10000);

结论

通过对浏览器对象模型(BOM)的深入理解和应用,开发者可以有效地与浏览器进行交互,实现更加复杂和动态的网页应用程序。无论是通过控制窗口对象、获取浏览器信息,还是操作浏览器历史记录,BOM为JavaScript提供了丰富的功能,使得网页开发更为灵活和强大。


以上就是关于【前端基础篇】JavaScript之BOM介绍的内容啦,各位大佬有什么问题欢迎在评论区指正,您的支持是我创作的最大动力!❤️

在这里插入图片描述

这篇关于【前端基础篇】JavaScript之BOM介绍的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1108285

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Spring Boot中JSON数值溢出问题从报错到优雅解决办法

《SpringBoot中JSON数值溢出问题从报错到优雅解决办法》:本文主要介绍SpringBoot中JSON数值溢出问题从报错到优雅的解决办法,通过修改字段类型为Long、添加全局异常处理和... 目录一、问题背景:为什么我的接口突然报错了?二、为什么会发生这个错误?1. Java 数据类型的“容量”限制

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

SpringBoot请求参数接收控制指南分享

《SpringBoot请求参数接收控制指南分享》:本文主要介绍SpringBoot请求参数接收控制指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring Boot 请求参数接收控制指南1. 概述2. 有注解时参数接收方式对比3. 无注解时接收参数默认位置

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

Spring Boot 整合 SSE的高级实践(Server-Sent Events)

《SpringBoot整合SSE的高级实践(Server-SentEvents)》SSE(Server-SentEvents)是一种基于HTTP协议的单向通信机制,允许服务器向浏览器持续发送实... 目录1、简述2、Spring Boot 中的SSE实现2.1 添加依赖2.2 实现后端接口2.3 配置超时时

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二

一文详解Java异常处理你都了解哪些知识

《一文详解Java异常处理你都了解哪些知识》:本文主要介绍Java异常处理的相关资料,包括异常的分类、捕获和处理异常的语法、常见的异常类型以及自定义异常的实现,文中通过代码介绍的非常详细,需要的朋... 目录前言一、什么是异常二、异常的分类2.1 受检异常2.2 非受检异常三、异常处理的语法3.1 try-

Java中的@SneakyThrows注解用法详解

《Java中的@SneakyThrows注解用法详解》:本文主要介绍Java中的@SneakyThrows注解用法的相关资料,Lombok的@SneakyThrows注解简化了Java方法中的异常... 目录前言一、@SneakyThrows 简介1.1 什么是 Lombok?二、@SneakyThrows