JavaScript高级进阶(一)

news2024/9/21 4:22:42

什么是BOM

BOM: Browser Object Model(浏览器对象模型) 提供了独立于内容与浏览器窗口进行交互的对象,你可以前进后退……历史记录等,是浏览器自动生成的功能。

浏览器对象模型

对象以及说明:

window: 窗口对象,可以用来控制当前窗口,打开新窗口。

screen: 屏幕对象,获取屏幕相关信息。

navigator: 浏览器对象,通过这个对象可以判定用户所使用的浏览器。

history: 历史对象,可以用来前进或后退一个页面。

location: 地址对象,可以用来获取当前url的信息。

JavaScript计时事件: 在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。

localStorage|sessionStorage: 存储对象,可以用来存储数据,和cookie相似,区别是它是为了更大容量存储设计的,在使用上更方便。

 

//在JS中,window代表着最顶层,所有东西都属于它,是顶层对象。

console.log(window);可以打印看一下:

53674a77c94346b4bcf55e5add2d4f0e.png

bcc534cabeb642cea2136129f216c4c5.png 

 非常多这里截了一部分

window对象

//新窗口打开

window.open('https://www.baidu.com','_blank');

25727af9869a4a54b2a3ce082fed36e7.png

 //当前窗口打开

window.open('https://www.baidu.com','_self');

a3f2a5600eea485eae34d0c2552778cc.png

//关闭窗口

window.close()

screen屏幕对象

获取当前屏幕的宽高,浏览器的有效宽高,屏幕的分辨率。

console.log(screen);打印一下:

9631bb3361b7468ab74bb1b79f3ce816.png

可以看到width和height是当前屏幕宽高,而availHeight与availWidth是浏览器的有效宽高,colorDepth是分辨率(在1px中能包含多少颜色块),可根据不同的宽高展示不同的对象。

nagivator浏览器对象

记录的当然是关于浏览器的信息,也可以log看一下:

d7c11ea74f5b4c9789538f0ee490d8ad.png

 

正常情况下var                            version_=navigator.userAgent.toLowerCase();

console.log(version_);

if(version_.indexOf('chrome')!=-1){

    alert('谷歌浏览器')

}else(

    alert('其他浏览器')

)

可以通过navigator.userAgent可以查看浏览器及其运行环境的信息,具体有:

1.浏览器名称和版本:标识浏览器的名称及其版本号。例如,Chrome/114.0.0.0 表示 Chrome 浏览器及其版本。

2.渲染引擎:标识浏览器使用的渲染引擎,如 WebKit、Blink、Gecko 等。

3.操作系统:标识设备的操作系统,例如 Windows、macOS、Linux、Android、iOS 等。

4.设备类型:有时会包括设备类型的信息,如手机、平板或桌面设备。

5.兼容性信息:为了确保向后兼容,userAgent 字符串可能包含不再使用的或与其他浏览器类似的标识信息。

了解就行,但在这我得到结果却是

741562e3b52d4beda1b04e99c88c4ca8.png

我没用谷歌这是为什么?

 在浏览器的 navigator.userAgent 字符串中带有 “Google” 或 “Chrome” 信息,即使你使用的并不是谷歌浏览器,可能有以下几个原因:

1.浏览器的伪装: 一些浏览器(例如Microsoft Edge、Opera、Brave等)基于Chromium内核开发,它们的 userAgent 通常包含类似Chrome的信息,以确保与网站的兼容性。开发者有时会检查 userAgent 来确定浏览器并调整网页的呈现方式,因此这些浏览器通常会伪装成Chrome浏览器,以避免潜在的兼容性问题。

2.Chromium内核: 如果你使用的是基于Chromium内核的浏览器,navigator.userAgent 字符串中会包含与Chrome类似的信息,因为它们共享相同的浏览器引擎。

3.兼容性原因: 有些网站在检测到非谷歌浏览器时可能会限制功能或显示不兼容的信息。因此,浏览器开发者通常会在 userAgent 中包含Chrome或Google相关的标识,以避免这些问题。

history对象

这个一说就明白,写这么三个html页面:

1.html:

<body>

    <h1>页面1</h1>

    <a href=" ">点击前往页面2</a >

</body>

2.html:

<body>

    <h1>页面2</h1>

    <a href=" ">点击前往页面3</a >

</body>

3.html:

<body>

    <h1>页面3</h1>

    <a href=" ">到此为止</a >

</body>

ed4e2e1205e34ab28a25790562e24d8c.png

(首先我们可以log一下history看一下:

4ea3d688948f4fb99c06082bac9c4d63.png

就这么个东西一点就前往别的页面,我们再加点东西:

<body>

    <h1>页面1</h1>

    <a href=" ">点击前往页面2</a >

    <button οnclick="go()">前往</button>

    <button οnclick="back()">后退</button>

    <script>

        // console.log(window.history);

        function go(){

            //history内有个forward(),前进一步

            window.history.forward();

        }

        function back(){

            //history内有个back(),后退一步

            window.history.back();

        }

    </script>

</body>

把history中的前进后退封装成两个函数,再绑定到按钮上:

7745f16998e043fca19e1ac73375bd05.png

 76b71a2544eb4fb291646246eaec32e4.png

 1ef5068fba37489b9980717088bdcba2.png

 此时我们点击下一页后出现历史记录,就可以用前进后退来前往下一页面,回到上一页了,还可以直接前进2步,这需要history下go这个方法:

  <script>

        function go(){

//在go方法后传参数,这里2表示前进2步

            window.history.go(2);

        }

        function back(){

//-1表示后退一步

            window.history.go(-1);

        }

    </script>

location对象

地址对象,获取当前URL的信息,获取当前页面路径。

location.href获取到页面的路径,页面从哪里来。

<script>

        console.log(location.href);

</script>

cf78ca9fc06f42e28289145ba25612d2.png

 如果看到的结果是file://,表示打开的是本地文件。

location.href不赋值是获取到页面的路径,如果是这样:location.href="http://www.baidu.com"就是重新定义去往方向。

location.reload();是刷新页面,可以封装成一个方法,绑到按钮上,当然浏览器都自带着也不太需要。

除此之外,window下还有一些别的方法,如open()打开页面,close()关闭页面等,别的就不细说了。

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

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

相关文章

FreeRTOS中任务通知的使用

目录 0x01 任务通知介绍0x02 示例代码 0x01 任务通知介绍 简单举个例子&#xff1a; 例如任务一用于获取数据&#xff0c;任务二用于处理数据。 但这其中存在一个先后关系&#xff1a;必须等到任务一获取完了数据&#xff0c;任务二才能开始工作&#xff0c;你会如何选择何种…

两个月冲刺软考——概念+求已知内存按字节编址从(A)…到(B)…的存储容量+求采用单/双缓冲区需要花费的时间计算 类型题目讲解

1.四个周期的区别与联系 时钟周期&#xff1a;也称为CPU周期或机器周期&#xff0c;是CPU操作的基本时间单位。 指令周期&#xff1a;是指CPU执行一条指令所需的全部时间。一个指令周期通常由多个时钟周期组成&#xff0c;因为执行一条指令可能需要多个步骤&#xff0c;如取指…

基于 OpenCV 的数字图像处理实验平台设计

基于 OpenCV 的数字图像处理实验平台设计 前言简介正文资源链接&#xff08;含源码&#xff09; 前言 哈哈上学那会儿做的一个软件&#xff0c;当时把OpenCV各个基础算法都集成在了一起&#xff0c;还有一定程度的顺序执行部分相关算法的功能&#xff0c;那时候网上相关内容比较…

【开源大模型生态1】逐步成熟

人工智能和大模型的发展&#xff0c;我们之前讨论过&#xff0c;我在人工智能考试笔记中&#xff0c;也有分享。 结合上图&#xff0c;一起再来回顾一下。 机器学习出现之后&#xff0c;大模型逻辑推理为主&#xff0c;聚焦决策、认知能力。 深度学习出现之后&#xff0c;大…

利用注解将数据转为树结构

利用注解生成树结构 ListToTree注解 背景介绍: 通常,我们都有需要将一个列表List,转为树的结构 或许我们或多或少都写过工具类如: 或者: 以上写法,或多或少,都需要我们对集合进行一些处理,写多了自然就变得繁琐,甚至有业务相关的时候,修改会变动麻烦 并且功能比较单一,局限…

IO进程day07(信号灯集、消息队列)

【1】信号灯集 semaphore 1》概念 信号灯(semaphore)&#xff0c;也叫信号量&#xff0c;信号灯集是一个信号灯的集合。它是不同进程间或一个给定进程内部不同线程间同步的机制&#xff1b; 而Posix信号灯指的是单个计数信号灯&#xff1a;无名信号灯、有名信号灯。&#xff0…

Spring Security 用户认证和授权管理

文章目录 一、介绍1、简介2、核心概念3、主要功能4、处理流程 二、Spring Security实现权限1、添加依赖2、执行顺序和代码执行流程&#xff08;1&#xff09;用户登录&#xff08;2&#xff09;访问受保护资源 总结1、用户登录2、访问受保护资源 完整源码 一、介绍 1、简介 S…

SpringBoot+Vue的竞赛报名系统【源码】【最详细运行文档】

SpringBootVue的竞赛报名系统 一、项目简介二、技术选型三、运行步骤1. 后端启动2. 前端启动 四、项目演示登录页管理员登录学生登录源码获取方式 总结 大家好&#xff0c;这里是程序猿代码之路。在现代教育和技术竞赛中&#xff0c;一个高效、稳定的报名系统对于赛事的组织和管…

【Java|Stream流】获取各个数据类型的Stream流

文章目录 1.Stream流介绍2.获取Stream流2.1单列集合2.2双列集合2.3数组2.4零散的数据 3.Stream.of()方法的注意事项 1.Stream流介绍 在 Java 中&#xff0c;Stream 流是一种处理集合数据的高级方式&#xff0c;可以方便地对集合进行各种操作&#xff0c;如过滤、映射、排序、聚…

python:序列1~n的立方之和==序列1~n的和之平方

pip install sympy 或者 Anaconda 3 自带 sympy 点击 【Jupyter Notebook】 这是我最喜欢的代数恒等式之一 from IPython.display import Latex Latex(r"$1^32^33^3\cdotsn^3 (123\cdotsn)^2 $") Latex(r"$\sum_{i1}^n i^3 (\sum_{i1}^n i)^2 $")# 求…

小试牛刀-SOL链创建Token代币

目录 1.编写目的 2.账户结构 3.环境及使用依赖 4.步骤分解 4.1.导入相关依赖 4.2. 初始化变量 4.3. 创建并初始化Mint Account 4.4. 创建并初始化Metadata Account 4.5. 发送创建和初始化mint Account 4.6 铸造代币 5.源码分享 Welcome to Code Blocks blog 本篇文…

视频孪生智慧监所平台,实现监管数据的统一管理和立体直观呈现

针对监所传统方式难以有效管控&#xff1b;监所视频监控相似度极高&#xff0c;难以辨识&#xff0c;工作人员劳动强度大&#xff1b;监所行业涉及的系统众多&#xff0c;缺少统一高效的管理&#xff1b;监所行业对系统应急响应能力、智慧化程度要求高等痛点问题。在智慧监所建…

24数学建模国赛及提供助力(12——存贮论)!!!!

需要资料和助攻的小伙伴们可以文章末尾获取链接&#xff01;&#xff01;&#xff01;&#xff01; 点击链接加入群聊获取资料以及助攻https://qm.qq.com/q/NGl6WD0Bky

免费作图软件推荐,六款工具助你提升设计效率

在现代设计工作中&#xff0c;合适的作图工具能极大地提高工作效率。对于设计师、学生或是爱好者来说&#xff0c;免费的作图软件无疑是一个经济实惠的选择。本文将为大家介绍 6 款免费且功能强大的作图软件&#xff0c;其中包括国内备受欢迎的免费作图软件以及 5 款优秀的国外…

多态,匿名内部类(lambda表达式),集合

多态(polymorphism) 一个演员扮演多个不同角色。可以减少if语句的使用。 概念 具有接口或者继承关系 A extends B A implement C 类型一致&#xff08;IEat&#xff09; 民间说法&#xff1a;父类的引用指向不同的子类对象(不同时刻) 产生不同结果 调用相同方法&#x…

学历不会改变命运但知识一定可以改变命运

一、知识与学历的区别 首先&#xff0c;我们需要区分“知识”与“学历”。学历通常是指一个人通过正规教育体系获得的证书或学位&#xff0c;而知识则是更为宽泛的概念&#xff0c;它包括了一个人通过各种途径获得的信息、技能和理解。学历可能只是知识的一部分&#xff0c;而…

自然语言处理系列五十二》文本分类算法》BERT模型算法原理及文本分类

注&#xff1a;此文章内容均节选自充电了么创始人&#xff0c;CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》&#xff08;人工智能科学与技术丛书&#xff09;【陈敬雷编著】【清华大学出版社】 文章目录 自然语言处理系列五十二文本分类算法》BERT模型算法原理及文本分…

day7 测试知识积累

1.有一个班级表,里面有学号,姓名,学科,分数。找到语文学科分数最高的前10位的姓名(SQL) select 姓名 from 班级表 where 学科=语文 order by 分数 DESC limit 10; 2.有一张年级表,有班级,年级,学生姓名,找到这10名同学所在的班级(SQL) select class from 年级表 wher…

《python语言程序设计》第8章第12题生物信息:找出基因,生物学家使用字母A C T和G构成字符2串建模一个基因组(上)

草稿一、用单一方法遍历文本 9.1代码 genome_text TTATGTTTTAAGGATGGGGCGTTAGTTdef div_word(word_to_judge):len_num len(word_to_judge)save_word ""if len_num % 3 0:print("This word is valid")if save_word.find("ATG") "ATG&qu…

SpringBoot链路追踪②:如何集成?

首先下载Zipkin的jar包&#xff1a;Central Repository: io/zipkin/zipkin-server (maven.org) 根据自己的项目版本。我的版本分别是&#xff1a; <spring-boot.version>2.7.18</spring-boot.version> <spring-cloud.version>2021.0.8</spring-cloud.ve…