JavaScript -- 11. BOM及常用对象介绍

news2024/11/16 18:10:15

文章目录

  • BOM对象
    • 1 BOM
    • 2 navigator
    • 3 location
      • 3.1 常用方法
      • 3.2 url各部分名称
    • 4 history

BOM对象

1 BOM

  • 浏览器对象模型

  • BOM为我们提供了一组对象,通过这组对象可以完成对浏览器的各种操作

  • BOM对象:

    • Window —— 代表浏览器窗口(全局对象)
    • Navigator —— 浏览器的对象(可以用来识别浏览器)
    • Location —— 浏览器的地址栏信息
    • History —— 浏览器的历史记录(控制浏览器前进后退)
    • Screen —— 屏幕的信息
  • BOM对象都是作为window对象的属性保存的,所以可以直接在JS中访问这些对象

image-20221207212633374

2 navigator

Navigator —— 浏览器的对象(可以用来识别浏览器)

userAgent 返回一个用来描述浏览器信息的字符串

获取用户当前的浏览器信息

let sBrowser
const sUsrAg = navigator.userAgent

// The order matters here, and this may report false positives for unlisted browsers.

if (sUsrAg.indexOf("Firefox") > -1) {
    sBrowser = "Mozilla Firefox"
    // "Mozilla/0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
} else if (sUsrAg.indexOf("SamsungBrowser") > -1) {
    sBrowser = "Samsung Internet"
    // "Mozilla/0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
} else if (
    sUsrAg.indexOf("Opera") > -1 ||
    sUsrAg.indexOf("OPR") > -1
) {
    sBrowser = "Opera"
    // "Mozilla/0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
} else if (sUsrAg.indexOf("Trident") > -1) {
    sBrowser = "Microsoft Internet Explorer"
    // "Mozilla/0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
} else if (sUsrAg.indexOf("Edge") > -1) {
    sBrowser = "Microsoft Edge (Legacy)"
    // "Mozilla/0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
} else if (sUsrAg.indexOf("Edg") > -1) {
    sBrowser = "Microsoft Edge (Chromium)"
    // Mozilla/0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64
} else if (sUsrAg.indexOf("Chrome") > -1) {
    sBrowser = "Google Chrome or Chromium"
    // "Mozilla/0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
} else if (sUsrAg.indexOf("Safari") > -1) {
    sBrowser = "Apple Safari"
    // "Mozilla/0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/601.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
} else {
    sBrowser = "unknown"
}

alert(`You are using: ${sBrowser}`)

3 location

3.1 常用方法

location 表示的是浏览器地址栏的信息

  • 可以直接将location的值修改为一个新的地址,这样会使得网页发生跳转
  • location.assign() 跳转到一个新的地址
  • location.replace() 跳转到一个新的地址(无法通过回退按钮回退)
  • location.reload() 刷新页面,可以传递一个true来强制清缓存刷新
  • location.href 获取当前地址

3.2 url各部分名称

Location - Web APIs | MDN (mozilla.org)

  1. href

image-20221207215312482

  1. origin

image-20221207215343253

  1. host

image-20221207215417331

  1. hostname

image-20221207215431395

port

image-20221207215440925

  1. pathname

  1. search

image-20221207215503331

  1. hash

image-20221207215518421

  1. protocol

image-20221207215355164

4 history

  • history.back():回退按钮
  • history.forward():前进按钮
  • history.go():可以向前跳转也可以向后跳转,传入正数向前走,传入负数向后走

go(1)相当于forward()

go(-1)相当于back()

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

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

相关文章

哥斯拉连webshell需要配置(哥斯拉连接Webshell实践)

1. 哥斯拉连webshell需要配置环境 kali linux   docker+vulhub   nginx(1.19.6)+php(7.4.15) 2. 哥斯拉连webshell需要配置过程 2.1 vulhub镜像拉取 vulhub安装的话去官网上有安装教程   Vulhub - Docker-Compose file for vulnerability environment   安装好之后…

VUE基本认知

1:vue介绍 渐进式 JavaScript 框架(有2个库,核心库和插件库,如果能用核心库解决的就是用核心库,核心库解决不了的,就使用插件库) 渐:逐渐, 进:添加 作者: 尤…

原生数据湖体系

背景: 随着数据量的爆发式增长,数字化转型称为了整个IT行业的热点,数据也开始需要更深度的价值挖掘,因此需要确保数据中保留的原始信息不丢失,从而应对未来不断变化的需求。当前以oracle为代表的数据库中间件已经逐渐…

nginx详细配置负载均衡全过程以及宕机情况处理

一、准备 1.下载安装nginx服务器(win10/Linux同样适用) 2.两个以上服务的服务地址 二、详细步骤以及宕机情况处理 (1)编辑 nginx.conf 配置文件,该文件在conf文件夹下面。 轮询: upstream my_server …

【物理应用】超声场可视化仿真模拟【含GUI Matlab源码 1494期】

⛄一、简介(附论文) 通过对超声场理论的数学物理方法计算,分别对圆型和矩型换能器的声轴线上声压分布、轴方向横截面的声压的分布及声场的指向性的表达式作出推导和演算,并得出结论;以及研究脉冲波声场分布特性&#…

计算机组成大题分析(五)

常见x86汇编指令解释 例题:已知 f(n)n! nX(n-1)XX2X1,计算 f(n)的 C 语言函数 f(n) 的源程序(圈住的地方)及其在 32 位计算机 M 上的部分机器级代码如下: 其中,机器级代码行包括行号、虚拟地址、机器指令和汇编指令&am…

止损的意义是什么?我们为何要止损这个操作?

止损的意义是什么?我们为何要止损这个操作?我想很多人并没有深入思考这个问题,我猜测绝大数人都会说为了风险控制,无条件执行,割断亏损让利润奔跑,这类的话,其实不然。 我觉得一个操作如果内心…

什么是云计算中的多租户?

在云计算中,多租户意味着一个云供应商的多个客户使用相同的计算资源。即使他们共享资源,云客户也不知道彼此,他们的数据是分开的。多租户是云计算的重要组成部分,没有它,云服务将远不实用。 多租户的经典定义是为多个用…

12月8日(第八天)

DOCKER 参考文章: 十分钟学会用docker部署微服务 Docker 让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,便可以实现虚拟化。(开始时觉得docker麻烦,我部署java应用&a…

Python+Requests实现接口自动化

一般对于自动化的理解,有两种方式的自动化。 第一,不需要写代码,完全由工具实现,这种方式的工具一般是公司自己研发的,方便黑盒测试人员使用。这种工具的特点是学习成本低,方便使用,但是通用性…

JSP SSH共享单车租赁系统myeclipse开发oracle数据库MVC模式java编程计算机网页设计

一、源码特点 JSP SSH共享单车租赁系统是一套完善的web设计系统(系统采用ssh框架进行设计开发MVC模式),对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要 采用B/S模式开发。开发环境为TO…

亚马逊云科技re:Invent:Serverless成技术新常态

2019年底,亚马逊云科技发布了Amazon Lambda的“预置并发(Provisioned Concurrency)”功能,它允许亚马逊云科技无服务器计算用户使其函数保持“已初始化并准备好在两位数毫秒内响应”的状态,这意味着“冷启动”问题成为…

xss-labs靶场练习部分记录

目录 靶场环境 测试使用 evel3 evel5 evel6 evel7 evel8 evel9 evel10 evel11 evel12 evel13 evel14 靶场环境 browser&#xff1a;firefox&#xff1b;plugin:Hackbar,tools:burp 注&#xff1a;常见payload在评论区 测试使用 " <> scRiPt oNeEro…

MySQL 的日志(undo log、redo log、binlog)

我们在MYSQL执行过程文章中知道一条SQL语句执行流程是怎么样的&#xff0c;但SQL语句是怎么入库的呢&#xff1f;如下图&#xff1a; SQL语句入库过程在图中涉及三个日志&#xff1a; undo log&#xff08;回滚日志&#xff09;、redo log&#xff08;重做日志&#xff09; 、b…

TI RM57 如何配置RTI作为定时器使用

引言 最近公司要对新项目的算法进行评估&#xff0c;这就需要拿到RM57浮点运算能力数据&#xff0c;测量运算速度就要用到高精度定时器&#xff0c;通过查看芯片手册发现RTI可以满足这个需求&#xff0c;本文对RTI的配置和使用做一个详细的记录&#xff0c;方便以后翻看。 ui…

Python的Socket编程

Python的Socket编程一、Socket简介二、Socket基本参数和函数介绍1. socket参数2.socket相关函数三、Python编写socket的步骤1.python编写server的步骤2.python编写client的步骤四、python socket变成实操1.server.py2.client.py3.socket更多功能五、案例1.TCP案例一&#xff1a…

推特如何解除敏感内容限制

推特如何解除敏感内容的限制&#xff0c;这里为大家分别介绍苹果、安卓、网页版的推特怎么看敏感内容&#xff0c;有需要的朋友可以看一下。 一、苹果安卓手机解除敏感内容方法&#xff08;对应中英文版&#xff09; 1.打开手机推特app&#xff0c;点击左上角的【三横】进入个…

Navicat for MySQL —— 图形化工具使用

Navicat for MySQL 下载链接&#xff1a;点击跳转 提取码&#xff1a;520H 在之前的篇目当中讲到数据库的图形化工具 —— SQLyog的使用&#xff0c;那么本篇目讲的是关于另外一款图形化工具的使用 —— Navicat for MySQL &#xff1b;下面先来安装Navicat for MySQL: Navic…

Linux权限(下)

Linux权限下file指令目录的权限x权限r权限w权限文件的默认权限umask码修改umask码粘滞位背景谁能删除设有粘滞位的目录下的文件&#xff1f;设置粘滞位的注意事项file指令 在此之前我们先了解一个指令&#xff0c;这个指令可以让我们更详细的了解文件的具体类型&#xff0c;虽…

离散数学与组合数学-01

文章目录1. 离散数学与组合数学大纲要求概述1.1 离散数学概述1.2 组合数学概述1.3. 离散数学前言第1章 数理逻辑1.1 命题与联结词1. 命题2.联结词2.集合论3.代数系统4.图论本博客内容为参考B站视频做的笔记 大家多学习&#xff0c;努力考&#x1f4af;&#x1f4af;&#x1f4a…