BOM概述

news2024/11/18 18:39:20

目录

什么是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 字符串

什么是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。

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 值。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/492413.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【AI实战】训练一个自己的ChatGPT

【AI实战】训练一个自己的ChatGPT

【AI实战】训练一个自己的ChatGPT 准备环境代码模型 数据集Belle下载 Belle 的开源中文数据集&#xff08;仅限研究使用&#xff0c;禁止商用&#xff01;&#xff09;清洗自己的数据集上述工作完成后&#xff0c;大概是这样子的 训练测试参考 本文使用 Alpaca-LoRA 来训练一个…
阅读更多...
Linux_top命令

Linux_top命令

top命令是Linux系统下常用的性能分析工具&#xff0c;能够实时显示系统中各个进程的资源占用状况&#xff0c;类似于Windows的任务管理器。它是一个动态显示过程,执行该命令后,它展示的信息会将独占前台,直到用户终止该程序为止&#xff08;可以用Ctrl C终止&#xff09;。 t…
阅读更多...
汇编仿真 — 比较大小

汇编仿真 — 比较大小

项目文件 文件 关于项目的内容知识点可以见专栏单片机原理及应用 的第三章 汇编 题目&#xff1a;编程实现如下功能:比较片内 RAM的30H和40H单元中两个无符号数的大小&#xff0c;并将大数存入50H&#xff0c;小数存入51H&#xff0c;若两数相等&#xff0c;则使位单元7FH置1…
阅读更多...
内网：域内信息收集

内网：域内信息收集

一&#xff0c;判断是否有域 ipconfig /all systeminfo workgroup net config workstation net time /domain&#xff08;该命令有三种情况&#xff09; 1&#xff0c;存在域&#xff0c;当前用户不是域用户。 2&#xff0c;存在域&#xff0c;当前用户是域用户。 3&#xff0c…
阅读更多...
使用dataFEED OPC Suite将西门子PLC数据转发至REST API

使用dataFEED OPC Suite将西门子PLC数据转发至REST API

一 背景 在工业4.0或工业物联网的项目方案中&#xff0c;逐渐紧密融合的OT&IT技术给工业制造带来了新活力。与此同时&#xff0c;利用IT级别的协议和应用来对制造数据进行收集和分析也成为了指导工业生产和优化流程的重要力量&#xff0c;尤其是基于HTTP的轻量级协议REST …
阅读更多...
Python---学生管理系统、hashlib模块

Python---学生管理系统、hashlib模块

1. 学生管理系统 学生管理系统的数据结构设置: 一个学生信息对应一个字典 整个系统的所有学生&#xff1a;所有学生对应一个列表&#xff0c;列表中的元素全是字典 整个系统&#xff1a;一个字典, 字典中有一个key(all_student) 对应的值是所有学生; 这个字典需要做数据持久化…
阅读更多...
从传统Java应用到现代微服务，SpringBoot入门的基础指南

从传统Java应用到现代微服务，SpringBoot入门的基础指南

目录 一. 创建SpringBoot项目1.1 使用Spring Initializr快速构建项目1.2 手动创建springboot项目 二. SpringBoot入门案例解析2.1 依赖管理特性2.2 starter场景启动器2.3 引导类自动配置 三. REST风格四. 配置文件4.1 配置文件类型4.2 YAML文件的简介与使用4.3 Value与Configur…
阅读更多...
VSCode 开发flutter 实现安卓设备远程调试

VSCode 开发flutter 实现安卓设备远程调试

1&#xff0c;首先安装 ADB Commanads for VSCode扩展 并且必须确保ADB已经添加到系统环境变量中 如未添加请按照下面的方式添加&#xff0c;如添加请直接跳到下面。 2&#xff0c;添加环境变量&#xff08;windows可参考&#xff0c;mac忽略此项&#xff09; 我将ADB安装到这…
阅读更多...
3分钟快速实现mysql全量增量备份

3分钟快速实现mysql全量增量备份

需求说明&#xff1a; mysql数据库ip地址为192.168.1.100&#xff0c;端口3306&#xff0c;root密码111111&#xff0c; 服务器cantos7中ip地址192.168.1.101 利用xtrabackup每周六进行全量备份&#xff0c;每天进行增量备份&#xff0c;保留2个礼拜的备份&#xff0c;并且保存…
阅读更多...
睡眠经济2.0时代来了，老巨头们有护城河吗？

睡眠经济2.0时代来了，老巨头们有护城河吗？

在第23个世界睡眠日&#xff0c;中国睡眠研究会等机构发布了《中国睡眠研究报告2023》&#xff0c;近半数人每晚平均睡眠时长不足8小时&#xff0c;“失眠”已成为了当代人的生活常态。 越是睡不好&#xff0c;越要想办法。年轻人纷纷求助于好的寝具、好的助眠产品乃至保健品&…
阅读更多...
【C语言进阶C++】 C++基础--让你丝滑的从C语言进阶到C++

【C语言进阶C++】 C++基础--让你丝滑的从C语言进阶到C++

目录 前言 正文 1. 面向过程、面向对象 面向过程思维 面向对象思维 面向过程语言优缺点 面向对象语言优缺点 C面向对象特点 2. 输入、输出 C中的输入输出 总结C和C输入输出 3. 命名空间 作用域 命名空间 4. 动态申请空间 C动态申请空间&#xff08;new、delete&…
阅读更多...
Leetcode刷题之回文链表和交换链表中的结点

Leetcode刷题之回文链表和交换链表中的结点

竭力履行你的义务&#xff0c;你应该就会知道&#xff0c;你到底有多大的价值。 --列夫.托尔斯泰 目录 &#x1fab4;一.回文链表 &#x1f33b;1.快慢指针 &#x1f341;2.把值存入数组中&#xff0c;然后使用双指针 &#x1f33c;二.交换链表中的结点 &#x1…
阅读更多...
经典论文解读 — 端到端的VL预训练网络SOHO

经典论文解读 — 端到端的VL预训练网络SOHO

来源&#xff1a;投稿 作者&#xff1a;摩卡 编辑&#xff1a;学姐 论文标题&#xff1a; Seeing Out of tHe bOx :End-to-End Pre-training for Visual-Language Representation Learning》 Motivation 本文针对目前大量Visual-Language(VL) tasks使用由Faster-RCNN提取出的…
阅读更多...
余弦相似度公式推导及代码实现

余弦相似度公式推导及代码实现

余弦相似度公式推导 1. 为什么使用余弦值相似度&#xff1f;2. 公式推导2.1 三角函数余弦公式推导2.2 三角函数向量余弦公式推导 3. 余弦相似度代码实现 1. 为什么使用余弦值相似度&#xff1f; 空间维度上两个点之间相似定义 在空间维度上两个点之间是有夹角和方向&#xff0…
阅读更多...
计算机操作系统实验：页面置换算法的实现

计算机操作系统实验：页面置换算法的实现

目录 前言实验目的实验内容实验过程最佳置换算法代码实现算法流程流程图设计思路运行结果 先进先出算法代码实现算法流程流程图设计思路运行结果 最近最久未使用算法代码实现算法流程流程图设计思路运行结果 总结 前言 本实验的目的是通过编程模拟不同的页面置换算法&#xff…
阅读更多...
基于思科模拟器的路由与交换实训报告（单臂路由、三层交换机实现vlan通信、ospf、rip、dhcp、acl、nat技术总结）

基于思科模拟器的路由与交换实训报告（单臂路由、三层交换机实现vlan通信、ospf、rip、dhcp、acl、nat技术总结）

本博客是路由与交换实训报告&#xff0c;基于思科模拟器分别做了单臂路由、三层交换机实现vlan间通信、ospf、rip、dhcp、nat的实验&#xff0c;最后的nat综合实验是本次实训的大拓扑&#xff0c;综合了上述的几个技术。 大家可以当作一些思科小实验的总结&#xff0c;供网络工…
阅读更多...
数据库管理-第七十二期 复盘（20230505）

数据库管理-第七十二期 复盘（20230505）

数据库管理 2023-05-05 第七十二期 复盘1 再测试2 对照分析&#xff1a; 3 如何解决总结 第七十二期 复盘 上一期的内容&#xff0c;我承认主要是在放假&#xff0c;分析过程还是水了一点&#xff0c;SR转回国内之后&#xff0c;处理效率还是提升了一大截。 1 再测试 在客户…
阅读更多...
Linux - 第11节 - 网络基础(一)

Linux - 第11节 - 网络基础(一)

1.计算机网络背景 1.1.网络发展 独立模式&#xff1a;计算机之间相互独立 在早期的时候&#xff0c;计算机之间是相互独立的&#xff0c;此时如果多个计算机要协同完成某种业务&#xff0c;那么就只能等一台计算机处理完后再将数据传递给下一台计算机&#xff0c;然后下一台计…
阅读更多...
Python进阶——实现人脸识别

Python进阶——实现人脸识别

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 今天我们来实现一下人脸识别~ 先问大家一个问题 什么是百度Aip模块&#xff1f; 百度AI平台提供了很多的API接口供开发者快速的调用运用在项目中 本文写的是使用百度AI的在线接口SDK模块&#xff08;baidu-aip&#…
阅读更多...
单链表——单链表的定义及基本操作（初始化、头插法尾插法建表、查找、插入、删除、判空等）

单链表——单链表的定义及基本操作（初始化、头插法尾插法建表、查找、插入、删除、判空等）

单链表的定义 由于顺序表存在以下缺陷&#xff0c;所以衍生出了链表&#xff0c;而链表种类有很多种&#xff0c;今天我们讲的是单链表。 顺序表存在的问题如下 1.中间/头部的插入删除&#xff0c;时间复杂度为O(N) 2. 增容需要申请新空间&#xff0c;拷贝数据&#xff0c;释…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023