23-BOM和常见的BOM对象

news2025/1/13 13:34:06

一、是什么

BOM (Browser Object Model),浏览器对象模型,提供了独立于内容与浏览器窗口进行交互的对象

作用:跟浏览器做一些交互效果, 如何进行页面的后退,前进,刷新,浏览器的窗口发生变化,滚动条的滚动,以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率


浏览器的全部内容可以看成DOM,整个浏览器可以看成BOM。

在这里插入图片描述

提示:以下是本篇文章正文内容,下面案例可供参考

二、window

Bom的核心对象是window,它表示浏览器的一个实例

在浏览器中,window对象有双重角色,即是浏览器窗口的一个接口,又是全局对象

因此所有的全局作用域中声明的变量,函数都会变成 window对象的属性和方法

var name = '我是name';
function lookName(){
	alert(this.name);
}
console.log(window.name);
lookName();
window.lookName();

提供了一些操作窗口的API

  • moveBy(x,y):从当前位置水平移动窗体x个像素,垂直移动窗体y个像素,x为负数,将向左移动窗体,y为负数,将向上移动窗体
  • moveTo(x,y):移动窗体左上角到相对于屏幕左上角的(x,y)点
  • resizeBy(w,h):相对窗体当前的大小,宽度调整w个像素,高度调整h个像素。如果参数为负值,将缩小窗体,反之扩大窗体
  • resizeTo(w,h):把窗体宽度调整为w个像素,高度调整为h个像素
  • scrollTo(x,y):如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置
  • scrollBy(x,y): 如果有滚动条,将横向滚动条向左移动x个像素,将纵向滚动条向下移动y个像素

window.open() 既可以导航到一个特定的url,也可以打开一个新的浏览器窗口

window.open('url','topFrame')==><a herf="" target="topFrame"></a>

window.close() 仅用于通过 window.open() 打开的窗口

新创建的 window 对象有一个 opener 属性,该属性指向打开他的原始窗口对象

三、location

已知 url地址

location 属性描述有:

在这里插入图片描述
除了 hash之外,只要修改location的一个属性,就会导致页面重新加载新URL

location.reload(),此方法可以重新刷新当前页面。

这个方法会根据最有效的方式刷新页面,如果页面自上一次请求以来没有改变过,页面就会从浏览器缓存中重新加载

如果要强制从服务器中重新加载,传递一个参数true即可

四、navigator(了解)

navigator 对象主要用来获取浏览器的属性,区分浏览器类型。属性较多,且兼容性比较复杂
在这里插入图片描述

代码如下(示例):

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

五、screen

保存的纯粹是客户端能力信息,也就是浏览器窗口外面的客户端显示器的信息,比如像素宽度和像素高度

在这里插入图片描述

六、history

history对象主要用来操作浏览器URL的历史记录,可以通过参数向前,向后,或者向指定URL跳转

常用的属性有:

  • history.go()

接收一个整数数字或者字符串参数:向最近的一个记录中包含指定字符串的页面跳转

history.go('xxx.com')

当参数为整数数字的时候,正数表示向前跳转指定的页面,负数为向后跳转指定的页面

history.go(3) // 向前跳转三个记录
history.go(-1) // 向后跳转一个记录
  • history.forward() 向前跳转一个记录
  • history.back() 向后跳转一个页面
  • history.length 获取历史记录数

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

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

相关文章

ECS云服务器U实例评测,可以免费体验哦

目录 一、ECS云服务器U实例介绍 话题一、U实例使用体感如何&#xff0c;是否和主售型实例有区别&#xff0c;具体体现在哪里&#xff1f; 话题二、结合相关数据材料&#xff0c;对您感兴趣的场景 话题三、使用u实例是否为您的云上业务或者测试项目提供了帮助支持&#xff1…

Axure教程——表格内部修改

本文介绍的时用Axue中的中继器制作表内修改效果 效果 预览地址&#xff1a;https://w97xns.axshare.com 功能 点击某条数据的”编辑“按钮可以修改此条数据的每项数据&#xff0c;”编辑“和”删除“按钮变为”保存“和”取消‘按钮 制作 需要的元件&#xff1a;矩形、中继…

asp.net MVC

文件目录 页面 HTML与Script的联系 HTML元素通过调用脚本中的function来触发前端的动作要进行的后端逻辑操作 Script中通过选择器$(“#str”)来改变前端HTML的显示数据 Script中有两种类型的函数模式 $(function(){ … }) &#xff1a;window.onload时调用。function btnRese…

​Chamilo 学习管理软件存在命令执行漏洞(CVE-2023-34960)

Chamilo 学习管理软件存在命令执行漏洞&#xff08;CVE-2023-34960&#xff09; 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff…

Python基础语法笔记整理(黑马8天学会python笔记)

Python 第一章、基础语法 01.字面量(写在代码中的固定的值) 02.注释 # 单行注释 """ 多行注释 """03.变量 变量无类型&#xff0c;数据有类型 变量名 变量值04.数据类型 数据类型&#xff1a; type()05.类型转换 字符串转数字&#xff…

【unity实战】制作一个类帝国时代、红警——RTS战略性游戏

文章目录 先来看看实现的最终效果什么是RTS游戏一、两种方法实现相机的移动旋转缩放以及拖拽功能前言准备第一种办法1. 移动1.1 代码实现&#xff0c;里面都写了详细的中文注释&#xff0c;就不过多解释了1.2 效果&#xff1a;1.3 问题&#xff1a; 2. 缩放2.1 代码 3. 限制范围…

Linux内核TCP参数调优全面解读

Linux内核TCP参数调优全面解读 前言 TCP 性能的提升不仅考察 TCP 的理论知识&#xff0c;还考察了对于操心系统提供的内核参数的理解与应用。 TCP 协议是由操作系统实现&#xff0c;所以操作系统提供了不少调节 TCP 的参数。 如何正确有效的使用这些参数&#xff0c;来提高 T…

微前端框架MicroApp入门学习笔记(一)

1、简介 微前端是一种架构风格&#xff0c;旨在通过将前端应用程序拆分为更小、更可管理的部分&#xff0c;使多个团队能够独立开发、部署和维护这些部分&#xff0c;从而实现前端的可扩展性和可维护性。   MicroApp框架是京东出品的一种用于构建微前端架构的开源框架&#x…

Linux系统开机启动详细流程

目录 Linux系统开机启动流程为什么要了解系统开机启动流程关机的命令开机流程图:开机自检&#xff08;Power-On Self-Test&#xff0c;POST&#xff09;BIOSROM和RAMBIOS的介绍CMOS的介绍&#xff1a;BIOS和CMOS的区别和联系如何进入BIOS系统&#xff1f;如何改BIOS的顺序以及为…

vue js实现表格行拖拽

效果图&#xff1a; <a-table :dataSource"dataSource" :columns"columns" :pagination"false"><template #bodyCell"{ column, record }"><template v-if"column.key td"><div style"cursor: p…

|DataDirectory| 解决Web.config中数据库连接的相对路径问题

1、业务背景 维护老系统代码&#xff0c;Web.config中数据库字符串连接的相对路径的处理 2、核心代码如下 <connectionStrings><add name"connString" connectionString"ProviderMicrosoft.Jet.OLEDB.4.0;Data Source|DataDirectory|\FnDB.mdb"…

【Java】Java中的String类

文章目录 一、认识 String 类二、String 类的常用方法2.1 构造方法2.2 String 类对象之间的比较2.3 字符串查找2.4 字符串的转换2.5 字符串替换2.6 字符串拆分2.7 字符串截取2.8 字符串常量池2.9 字符串的不可变性 三、StringBuilder 和 StringBuffer3.1 StringBuilder3.2 Stri…

robotframework接口自动化测试详解

我们在使用rebotframework的时候&#xff0c;不只是能做UI自动化&#xff0c;接口自动化也是可以的。 那么这里就整理一下rebotframework_接口自动化的应用&#xff1a; 一、编写接口测试 由上图可知&#xff0c;该接口如下信息&#xff1a; 接口功能描述&#xff1a;预诊模…

Spring6快速入门

Spring6快速入门 各工具版本要求&#xff1a; JDK:Java17 Maven:3.6 Spring:6.0.9 简介 Spring是一个控制反转(IOC)&#xff0c;面向切面(AOP)编程的轻量级框架。 2002年&#xff0c;Rod Johnson首次推出Spring框架的雏形&#xff0c;interface21(https://interface21.io/) 200…

python爬虫-获取cookie实例小记

注意&#xff01;&#xff01;&#xff01;&#xff01;某XX网站逆向实例仅作为学习案例&#xff0c;禁止其他个人以及团体做谋利用途&#xff01;&#xff01;&#xff01; 第一步&#xff1a;请求拿到响应内容。并分析。 第二步&#xff1a;关键步骤分析(这部分参考的B站图灵…

2023 年互联网 Java 工程师高级面试八股文汇总(1260 道题目附解析)

今年的行情&#xff0c;让招聘面试变得雪上加霜。已经有不少大厂&#xff0c;如腾讯、字节跳动的招聘名额明显减少&#xff0c;面试门槛却一再拔高&#xff0c;如果不用心准备&#xff0c;很可能就被面试官怼得哑口无言&#xff0c;甚至失去了难得的机会。 现如今&#xff0c;…

concurrenthashmap原理

目录 一、Concurrent类型的容器 二、HashMap多线程死链问题 三、Concurrenthashmap8原理 1、构造器 2、get流程 3、put流程 4、initTable 5、addCount方法 6、size流程 四、Concurrenthashmap7原理 1、put流程 2、rehash扩容流程 3、get流程 一、Concurrent类型的…

如何选型低代码平台

编者按&#xff1a;近年来&#xff0c;在数字经济迅速发展的背景下&#xff0c;越来越多的企业开始建立健全业务系统&#xff0c;借助数字化工具提升管理效率。企业如何选自己合适的产品&#xff0c;本文从低代码定义&#xff0c;特点技术路线做了介绍。其中MyApps低代码平台拥…

git常用命令之tag

11. Tag 11.1 创建tag 命令作用轻量标签git tag v1.0基于本地当前分支最新commit创建tag v1.0git tag v.0325 125a1d1给指定commit 125a1d打标签附注标签git tag -a v.0329 -m "给标签添加说明" 125a1d1基于指定commit创建标签并添加说明git tag -a v.0329 -m &quo…

联邦学习中怎样对数据质量进行评估

目录 联邦学习中怎样对数据质量进行评估 联邦学习中怎么在不暴露数据的情况下&#xff0c;证明数据量条目数 联邦学习中怎样进行数据质量评估 联邦学习中怎样对数据质量进行评估 在联邦学习中&#xff0c;评估数据质量是至关重要的&#xff0c;因为数据质量直接影响到模型的…