JavaScript BOM 浏览器对象模型

简介: JavaScript BOM 浏览器对象模型

BOM,即浏览器对象模型,提供了与浏览器交互的对象。这些对象包括窗口(Window)、导航器(Navigator)、位置(Location)、历史记录(History)等。以下是一些关于JavaScript BOM的详细代码示例:

1.窗口对象

javascript// 获取窗口的宽度和高度
var width = window.innerWidth;
var height = window.innerHeight;
 
// 获取浏览器窗口的滚动条位置
var scrollX = window.pageXOffset;
var scrollY = window.pageYOffset;
 
// 打开新窗口
window.open('http://www.example.com', '_blank');

2.导航器对象

javascript// 获取当前页面的URL
var currentURL = window.location.href;
 
// 获取URL的路径名、查询字符串等部分
var pathname = window.location.pathname;
var search = window.location.search;

3.位置对象

javascript// 获取当前页面的URL
var currentURL = window.location.href;
 
// 获取URL的路径名、查询字符串等部分
var pathname = window.location.pathname;
var search = window.location.search;

4.历史对象

javascript// 前进到历史记录中的下一页
window.history.forward();
 
// 回到历史记录中的前一页
window.history.back();

5.屏幕对象

javascript// 获取屏幕的宽度和高度
var screenWidth = screen.width;
var screenHeight = screen.height;

6.事件处理

javascript// 添加事件监听器,例如点击事件
document.getElementById('myButton').addEventListener('click', function() {
alert('按钮被点击了!');
});


相关文章
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1054 14
|
8月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
256 23
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
1411 62
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
234 1
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
295 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
229 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
150 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
439 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
274 4