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

BOM概述

news 文章来源：https://blog.csdn.net/Chen_072_11/article/details/130507823 2024/11/15 20:58:09

什么是BOM

浏览器对象模型（Browser Object Model (BOM)）

Window对象

一些常用方法

JavaScript Window Screen

Window Screen

Window Screen 高度

Window Screen 可用宽度

Window Screen 可用高度

Window Screen 色深

Window Screen 像素深度

JavaScript Window Location

Window Location Href

Window Location 主机名

Window Location 路径名

Window Location 协议

Window Location 端口

Window Location Assign

JavaScript Window History

Window History

Window History Back

Window History Forward

JavaScript Window Navigator

浏览器 Cookie

浏览器应用程序名称

浏览器应用程序代码名称

浏览器引擎

JavaScript 弹出框

警告框

语法

确认框

语法

提示框

语法

JavaScript Timing 事件

Timing 事件

setTimeout() 方法

setInterval() 方法

JavaScript Cookies

什么是 cookie？

通过 JavaScript 创建 cookie

通过 JavaScript 读取 cookie

通过 JavaScript 改变 cookie

通过 JavaScript 删除 cookie

什么是BOM

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。

浏览器对象模型（Browser Object Model (BOM)）

不存在浏览器对象模型（BOM）的官方标准。

现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。

Window对象

在DOM中最高层的对象是Doucment

但是在BOM中最高的对象是window对象也就是直接面向窗口进行操作

一些常用方法

window.innerHeight - 浏览器窗口的内高度（以像素计）
window.innerWidth - 浏览器窗口的内宽度（以像素计）
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

具体使用举例

<!DOCTYPE html>
<html>
<body><p id="demo"></p><script>
var w = window.innerWidth;
var h = window.innerHeight;
var x = document.getElementById("demo");
x.innerHTML = "浏览器内窗宽度：" + w + "，高度：" + h + "。";
</script></body>
</html>

输出结果：

JavaScript Window Screen

window.screen 对象包含用户屏幕的信息。

Window Screen

window.screen 对象不带 window 前缀也可以写：

screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth

Window Screen 高度

screen.height 属性返回以像素计的访问者屏幕的高度。

Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。

Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。

Window Screen 色深

screen.colorDepth 属性返回用于显示一种颜色的比特数。

Window Screen 像素深度

screen.pixelDepth 属性返回屏幕的像素深度。

具体实现

<!DOCTYPE html>
<html>
<body><p id="demo"></p><script>
document.getElementById("demo").innerHTML = 
"屏幕宽度是：" + screen.width;
</script></body>
</html>

JavaScript Window Location

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。

Window Location Href

window.location.href 属性返回当前页面的 URL。

Window Location 主机名

window.location.hostname 属性返回（当前页面的）因特网主机的名称。

Window Location 路径名

window.location.pathname 属性返回当前页面的路径名。

Window Location 协议

window.location.protocol 属性返回页面的 web 协议。

Window Location 端口

window.location.port 属性返回（当前页面的）互联网主机端口的编号。

Window Location Assign

window.location.assign() 方法加载新文档。

具体例子实现

<!DOCTYPE html>
<html>
<body><h1>window.location 对象</h1><input type="button" value="加载新的文档" onclick="newDoc()"><script>
function newDoc() {window.location.assign("http://www.w3school.com.cn")
}
</script></body>
</html>

JavaScript Window History

Window History

window.history 对象可不带 window 书写。

为了保护用户的隐私，JavaScript 访问此对象存在限制。

Window History Back

history.back() 方法加载历史列表中前一个 URL。

这等同于在浏览器中点击后退按钮。

Window History Forward

history forward() 方法加载历史列表中下一个 URL。

这等同于在浏览器中点击前进按钮。

<html>
<head>
<script>
function goForward() {window.history.forward()}
</script>
</head>
<body><input type="button" value="Forward" onclick="goForward()"></body>
</html>

输出结果

JavaScript Window Navigator

window.navigator 对象包含有关访问者的信息。

浏览器 Cookie

cookieEnabled 属性返回 true，如果 cookie 已启用，否则返回 false

浏览器应用程序名称

appName 属性返回浏览器的应用程序名称

浏览器应用程序代码名称

appCodeName 属性返回浏览器的应用程序代码名称

浏览器引擎

product 属性返回浏览器引擎的产品名称

JavaScript 弹出框

警告框

如果要确保信息传递给用户，通常会使用警告框。

当警告框弹出时，用户将需要单击“确定”来继续。

语法

window.alert("sometext");

确认框

如果您希望用户验证或接受某个东西，则通常使用“确认”框。

当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。

如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。

语法

window.confirm("sometext");

提示框

如果您希望用户在进入页面前输入值，通常会使用提示框。

当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。

如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。

语法

window.prompt("sometext","defaultText");

JavaScript Timing 事件

Timing 事件

window 对象允许以指定的时间间隔执行代码。

这些时间间隔称为定时事件。

通过 JavaScript 使用的有两个关键的方法：

setTimeout(function, milliseconds)

在等待指定的毫秒数后执行函数。

setInterval(function, milliseconds)

等同于 setTimeout()，但持续重复执行该函数。

setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。

setTimeout() 方法

window.setTimeout(function, milliseconds);

window.setTimeout() 方法可以不带 window 前缀来编写。

第一个参数是要执行的函数。

第二个参数指示执行之前的毫秒数。

setInterval() 方法

setInterval() 方法在每个给定的时间间隔重复给定的函数。

window.setInterval(function, milliseconds);

window.setInterval() 方法可以不带 window 前缀来写。

第一个参数是要执行的函数。

第二个参数每个执行之间的时间间隔的长度。

本例每秒执行一次函数 "myTimer"（就像数字手表）。

<!DOCTYPE html>
<html>
<body><p>此页面上的脚本启动这个时钟：</p><p id="demo"></p><script>
var myVar = setInterval(myTimer, 1000);function myTimer() {var d = new Date();document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script></body>
</html>

加入一个停止摁钮

<!DOCTYPE html>
<html>
<body><p>此页面上的脚本启动这个时钟：</p><p id="demo"></p><button onclick="clearInterval(myVar)">停止时间</button><script>
var myVar = setInterval(myTimer ,1000);
function myTimer() {var d = new Date();document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script></body>
</html>

JavaScript Cookies

Cookie 让您在网页中存储用户信息。

什么是 cookie？

Cookie 是在您的计算机上存储在小的文本文件中的数据。

当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。

Cookie 是为了解决“如何记住用户信息”而发明的：

当用户访问网页时，他的名字可以存储在 cookie 中。
下次用户访问该页面时，cookie 会“记住”他的名字。

Cookie 保存在名称值对中，如：

username = Bill Gates

当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。

如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。

通过 JavaScript 创建 cookie

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

通过 JavaScript，可以这样创建 cookie：

document.cookie = "username=Bill Gates";

您还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

通过 JavaScript 读取 cookie

通过 JavaScript，可以这样读取 cookie：

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

通过 JavaScript 改变 cookie

通过使用 JavaScript，你可以像你创建 cookie 一样改变它：

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

旧 cookie 被覆盖。

通过 JavaScript 删除 cookie

删除 cookie 非常简单。

删除 cookie 时不必指定 cookie 值：

直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

您应该定义 cookie 路径以确保删除正确的 cookie。

如果你不指定路径，一些浏览器不会让你删除 cookie。

document.cookie 属性看起来像一个正常的文本字符串。但它不是。

即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。

如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样：

cookie1 = value; cookie2 = value;

显示所有 cookie 创建 Cookie 1 创建 Cookie 2 删除 Cookie 1 删除 Cookie 2

如果你想找到一个指定 cookie 的值，你必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。

BOM概述

目录什么是BOM 浏览器对象模型（Browser Object Model (BOM)） Window对象一些常用方法 JavaScript Window Screen Window Screen Window Screen 高度 Window Screen 可用宽度 Window Screen 可用高度 Window Screen 色深 Window Screen 像素深…...

编程日记 2023/5/9 10:36:21

3.Docker实用技术

Docker实用篇 0.学习目标 1.初识Docker 1.1.什么是Docker 微服务虽然具备各种各样的优势，但服务的拆分通用给部署带来了很大的麻烦。分布式系统中，依赖的组件非常多，不同组件之间部署时往往会产生一些冲突。在数百上千台服务中重复部署…...

编程日记 2023/6/1 9:47:13

群体无人机：协同作战的未来

摘要：本文将探讨群体无人机技术的发展及其在多个领域的应用，特别是在军事作战、救援任务和物流方面的潜力。我们将分析群体无人机在协同作战中的优势，以及如何通过协同控制和通信技术实现更高效的任务完成。内容： 引言简要介绍…...

编程日记 2023/5/9 10:26:18

如何在Windows AD域中驻留ACL后门

前言当拿下域控权限时，为了维持权限，常常需要驻留一些后门，从而达到长期控制的目的。Windows AD域后门五花八门，除了常规的的添加隐藏用户、启动项、计划任务、抓取登录时的密码，还有一些基于ACL的后门。 ACL介绍 …...

编程日记 2023/5/9 10:21:15

LVGL移植——stm32f4

LVGL移植说明移植LVGL版本：8.3.6 主控：STM32F407ZGT6 github链接：https://github.com/lvgl/lvgl.git 文章目录 LVGL移植说明STM32移植LVGL①需要的依赖文件②移植显示驱动文件③将文件加入工程当中④配置心跳④修改栈堆的空间⑤编译链接 STM…...

编程日记 2023/5/9 10:16:13

ASEMI代理ADP5054ACPZ-R7原装ADI车规级ADP5054ACPZ-R7

编辑：ll ASEMI代理ADP5054ACPZ-R7原装ADI车规级ADP5054ACPZ-R7 型号：ADP5054ACPZ-R7 品牌：ADI/亚德诺封装：LFCSP-48 批号：2023 引脚数量：48 工作温度：-40C~125C 安装类型：表…...

编程日记 2023/5/9 10:11:12

TCP/IP相关面试题

1. 什么是TCP/IP协议？它的作用是什么？ TCP/IP（Transmission Control Protocol/Internet Protocol）互联网中最常用的协议，是计算机网络通信的基础。由TCP协议和IP协议两部分组成。IP协议负责数据的传输和路由选择&#…...

编程日记 2023/5/9 10:06:10

MySQL数据库——MySQL存储过程是什么？

我们前面所学习的 MySQL 语句都是针对一个表或几个表的单条 SQL 语句，但是在数据库的实际操作中，经常会有需要多条 SQL 语句处理多个表才能完成的操作。例如，为了确认学生能否毕业，需要同时查询学生档案表、成绩表和综合表&…...

编程日记 2023/5/9 10:01:08

消息队列中的事务消息

大家好，我是易安！今天我们谈一谈消息队列中的事务消息这个话题。一说起事务，你可能自然会联想到数据库。我们日常使用事务的场景，绝大部分都是在操作数据库的时候。像MySQL、Oracle这些主流的关系型数据库，也都提供了…...

编程日记 2023/5/30 22:43:57

03. 路由参数.重定向.视图

学习要点： 1.路由参数 2.路由重定向 3.路由视图本节课我们来开始进入学习路由的参数设置、重定向和路由的视图。一．路由参数 1. 上一节课，我们已经学习了部分路由参数的功能，比如动态传递{id}； 2. 那么，有…...

编程日记 2023/5/9 9:51:06

Flowable入门

Flowable初体验 Flowable是什么 Flowable 是一个使用 Java 编写的轻量级业务流程引擎，常用于需要人工审批相关的业务，比如请假、报销、采购等业务。为什么要使用工作流呢？ 对于复杂的业务流程，通过数据库的状态字段难以控制和…...

编程日记 2023/5/9 9:46:05

Scala Option类型,异常处理,IO,高阶函数

Option类型实际开发中, 在返回一些数据时, 难免会遇到空指针异常(NullPointerException), 遇到一次就处理一次相对来讲还是比较繁琐的. 在Scala中, 我们返回某些数据时，可以返回一个Option类型的对象来封装具体的数据，从而实现有效的避免空指针异常。S…...

编程日记 2023/5/9 9:41:04

unity进阶学习笔记：单例模式

游戏框架： 游戏框架一般包括消息框架，状态机，管理器，工具类。消息框架指游戏物体之的通信框架，虽然unity引擎自带一套消息框架，但该框架只能用于父子物体之间通信，无法实现大部分非父子关系的…...

编程日记 2023/5/9 9:36:03

软件测试——性能指标

登录功能示例： 并发用户数500； 响应时间2S； TPS到500； CPU不得超过75%； 性能指标有哪些？ 响应时间并发用户数 TPS CPU 内存磁盘吞吐量网络吞吐量移动端FPS 移动端耗电量 APP启动时间性能…...

编程日记 2023/5/9 9:31:02

leetcode 405. 数字转换为十六进制数

题目描述解题思路执行结果 leetcode 405. 数字转换为十六进制数. 题目描述数字转换为十六进制数给定一个整数，编写一个算法将这个数转换为十六进制数。对于负整数，我们通常使用补码运算方法。注意: 十六进制中所有字母(a-f)都必须是小写。十六进制…...

编程日记 2023/5/9 9:26:01

部门来了个软件测试，听说是00后，上来一顿操作给我看呆了...

前段时间公司新来了个同事，听说大学是学的广告专业，因为喜欢IT行业就找了个培训班，后来在一家小公司干了三年，现在跳槽来我们公司。来了之后把现有项目的性能优化了一遍，服务器缩减一半，性能反而提升4倍!给…...

编程日记 2023/5/9 9:20:59

使用篇丨链路追踪（Tracing）很简单：链路拓扑

作者：涯海最近一年，小玉所在的业务部门发起了轰轰烈烈的微服务化运动，大量业务中台应用被拆分成更细粒度的微服务应用。为了迎接即将到来的双十一大促重保活动，小玉的主管让她在一周内梳理出订单中心的全局关键上下游依赖&#…...

编程日记 2023/5/9 9:15:58

2023年厦门等保二级备案办理流程

根据规定，已运营/运行或新建的第二级以上信息系统的企业,事业单位/行政机关/民办非企业单位/社团组织/其他组织必须办理等保备案。 2023年厦门等保二级备案办理流程办理机构：公安局办结时限：受理后10个工作日办理方式：网上…...

编程日记 2023/5/31 8:37:16

提高开发效率，从这些小技巧开始——5个让你爱上IDEA的增加体验小技巧

前言如果你是一名Java开发人员，那么你一定会使用IntelliJ IDEA这个IDE。IntelliJ IDEA作为目前最受欢迎的Java IDE之一，已经成为了众多Java开发人员必备的工具之一。但是，你是否知道如何利用IDEA中的一些小技巧来提高你的开发效率和体验呢&a…...

编程日记 2023/5/9 9:05:56

‘’’ try: 语句块 except: 语句块2 else ‘’’ class Mobe1(): def init(self) -> None: pass def mob1(self):while True:try:num int(input(请输入一个数: ))result 50 / numprint(result)print(50/{0}{1}.format(num, result))except (ZeroDivisionError, ValueEr…...

编程日记 2023/5/9 9:00:55

ELK -- kibana 用nginx代理后无法访问

背景： 本地搭建好elk后，一切正常，后面改成用nginx代理kibana的5601端口，发现代理后无法正常访问（未代理的地址可正常访问），花了很多时间去查问题，报错基本都是http://ip:port/spaces…...

编程日记 2023/6/1 9:48:42

什么是分布式事务

目录分布式事务基础事务本地事务分布式事务分布式事务的场景分布式事务解决方案全局事务优点缺点可靠消息服务第一步 ：消息由系统A投递到中间件超时访问机制最大努力通知第一步：消息由系统A投递到中间件第二步：消息…...

编程日记 2023/5/9 8:50:52

在 Python 中将整数转换为罗马数字

罗马数字使用以下七个符号书写。 Symbol Value I 1 V 5 X 10 L 50 C 100 D 500 M 1000这些符号用于表示数以千计的数字。罗马写20，可以用两个X拼成XX。但是 XXXX 不…...

编程日记 2023/5/9 8:45:51

HashTable，Properties，TreeSet源码分析

目录 HashTable基本介绍 Hashtable和HashMap对比 Properties Properties基本介绍应该如何选择集合 TreeSet源码分析 HashTable基本介绍 1)存放的元素是键值对：即K-V 2)hashtable的键和值都不能为null，否则会抛出NullPointerException 3)hashTab…...

编程日记 2023/5/9 8:40:50

多维图像去噪方法研究

一、背景介绍由于传感器技术的快速发展，高光谱（HS）遥感（RS）成像为飞机等数据采集设备远距离观测和分析地球表面提供了大量的空间和光谱信息，航天器和卫星。 HS RS 技术的最新进展甚至革命为实现各种应用的…...

编程日记 2023/5/9 8:35:49

托福口语考察内容和形式

首先我们来简单介绍一下托福口语考试的构成和task1的任务形式。目录 TOEFL Speaking Test Format Independent Task 1 Task 1 Test Format Task 1 Testing Interface（考试界面） Task 1 Question Type...

编程日记 2023/5/9 8:30:48

【地铁上的设计模式】--结构型模式：代理模式

什么是代理模式代理模式是一种结构型设计模式，通过代理对象控制对原始对象的访问。代理对象充当客户端和实际对象之间的中介，隐藏了实际对象的复杂性，并提供了一些额外的控制。在软件系统中，代理模式可以有多种应用。例如&…...

编程日记 2023/5/9 8:25:47

Oracle 体系结构

文章目录 Oracle体系结构Oracle的内存结构Oracle的进程结构服务器进程后台进程可选后台进程物理存储结构逻辑存储结构概念： Oracle server由Oracle instance和Oracle database组成，Oracle instance由后台进程和共享内存组成，Oracle的实例包…...

编程日记 2023/5/9 8:20:46

java手写日历系统(亲测)

package com.test.test02;import java.util.Calendar; import java.util.GregorianCalendar; import java.util.Scanner;public class Test08 {//这是一个main方法，是程序的入口public static void main(String[] args) {//录入日期的StringScanner sc new Scanner…...

编程日记 2023/5/9 8:15:45

35-40的技术人员为什么会被“不友好”，请你们自身反思-拒做职场的“嗯嗯”怪

35-40真的是IT人员的一道坎吗？ IT技术做不到35-40，可是我身边有大量35-40事业发达、职业发展更好的朋友。同时，我身边也有大量35-40被“毕业”的人更多。本人经过7年来先后带队过3个大型研发团队，最少的也有60-70号人。最多的达到…...

编程日记 2023/5/9 8:10:44

网站论坛制作/郑州网站建设七彩科技

DevOps是一种实践方法，旨在保证高质量的前提下实现研发运维一体化，从而大幅缩短系统变更从提交到部署生产环境的时间。其中，持续集成是DevOps中非常重要的一环，它涉及集成多个开发人员的代码，并不断编译和测试&#xf…...

编程日记 2024/11/15 19:48:14

做网站挂靠服务器/百度推广平台首页

文章目录1. let1. 具有块级作用域2. 不存在变量提升3. 暂时性死区4. 经典面试题5. 小结2. const1. 具有块级作用域2. 声明常量时必须赋值3. 常量赋值后，值不能修改4. 小结5. let、const、var的区别3. 解构赋值1. 数组解构2. 对象解构3. 对象的连续解构赋值4. 小结4.…...

编程日记 2024/11/15 19:19:56

泉州握旗公司网站建设/福州短视频seo服务

使用2.0.0版本请注意：1，2.0.0版本的appkey与旧版本不共用，需重新申请。2，测试期间短信条数限制：20条/天，APP开发完成后务必提交到mob.com后台审核，开通完全免费短信。3、2.0.0之前版本的appkey无…...

编程日记 2024/11/15 19:00:46

东莞专业网站推广需要多少钱/宠物美容师宠物美容培训学校

文章目录 diff的基本语法及参数比较两个文件并排格式输出-u 以合并文件的方式显示不同补充： 三个文本比较命令： comm: 比较相同的文本，特点是： 如果文本中有空格就无法识别 patch 补丁： 举例： 后记 dif…...

编程日记 2024/11/15 17:31:31

深圳自助网站建设费用/seo公司费用

文章目录1. UDP协议UDP报文格式UDP校验过程1. UDP协议 UDP只在IP数据报服务之上增加了很少功能，即复用分用和差错检测功能。 UDP的主要特点: UDP是无连接的，减少开销和发送数据之前的时延。 UDP使用最大努力交付，即不保证可靠交付。 UDP是…...

编程日记 2024/11/15 16:38:56

页面模板公众号/seo关键词优化排名哪家好

7、约束（非常重要，五颗星*****） 7.1、什么是约束？ 约束对应的英语单词：constraint 在创建表的时候，我们可以给表中的字段加上一些约束，来保证这个表中数据的完整性、有效性&#…...

编程日记 2024/11/15 11:22:30

什么是BOM

浏览器对象模型（Browser Object Model (BOM)）

Window对象

一些常用方法

JavaScript Window Screen

Window Screen

Window Screen 高度

Window Screen 可用宽度

Window Screen 可用高度

Window Screen 色深

Window Screen 像素深度

JavaScript Window Location

Window Location Href

Window Location 主机名

Window Location 路径名

Window Location 协议

Window Location 端口

Window Location Assign

JavaScript Window History

Window History

Window History Back

Window History Forward

JavaScript Window Navigator

浏览器 Cookie

浏览器应用程序名称

浏览器应用程序代码名称

浏览器引擎

JavaScript 弹出框

警告框

语法

确认框

语法

提示框

语法

JavaScript Timing 事件

Timing 事件

setTimeout() 方法

setInterval() 方法

JavaScript Cookies

什么是 cookie？

通过 JavaScript 创建 cookie

通过 JavaScript 读取 cookie

通过 JavaScript 改变 cookie

通过 JavaScript 删除 cookie

Cookie 字符串

相关文章：