浏览器中的JavaScript核心BOM(浏览器对象模型)重点掌握对象之History对象的属性与方法

news2024/9/23 17:22:05

History对象是用来把网页浏览历史用类似栈的方式进行表示。

这定义听起来非常的抽象,其实History对象的作用就跟浏览器的前进和后退很像,我们来用几幅图来理解一下。首先我们先回顾一下浏览器的返回上一个页面跳转到下一个页面 这两个功能。在这里插入图片描述

就类似于上图的左边两个按键,大家是否感觉很熟悉呢?我们用一张动图感受一下

在这里插入图片描述

该动图展示的是页面1跳转到页面2,页面2跳转到页面3,然后可以通过浏览器的后退和前进按钮在这三个页面之间切换。

接下来我们来看一下它的实现原理,因为有些小伙伴可能不知道栈结构,这里我就拿两个没有盖子的杯子来举例,第一个杯子最上面的绿色块儿代表当前所在的页面

首先我们浏览器未做任何跳转页面操作时,这第一个杯子中有一个页面1,表示当前页面为页面1,第二个杯子为空

在这里插入图片描述

这时我们从页面1跳转到页面2,就会往第一个杯子中放入一个绿色块儿(页面2),此时页面2处于第一个杯子的最上方,表示当前页面为页面2,但第二个杯子仍为空

在这里插入图片描述

这时我们从页面2跳转到页面3,就会往第一个杯子中放入一个绿色块儿(页面3),此时页面3处于第一个杯子的最上方,表示当前页面为页面3,第二个杯子还是为空

在这里插入图片描述

现在我们使用浏览器的后退功能,也就是返回上一个页面,此时将页面3放到第二个杯子中,这时页面2就变成了第一个杯子中最上面的绿块儿了,所以此时处于页面2

在这里插入图片描述

现在我们再次使用浏览器的后退功能,也就是返回上一个页面,此时将页面2放到第二个杯子中,这时页面1就变成了第一个杯子中最上面的绿块儿了,所以此时处于页面1

在这里插入图片描述

我们再使用一下浏览器的前进功能,此时将第二个杯子最上面的绿块儿,也就是页面2,放到第一个杯子中,此时页面2又变成了第一个杯子中最上面的绿块儿,所以当前页面为页面2

在这里插入图片描述

我们再使用一下浏览器的前进功能,此时将第二个杯子最上面的绿块儿,也就是页面3,放到第一个杯子中,此时页面3又变成了第一个杯子中最上面的绿块儿,所以当前页面为页面3

在这里插入图片描述

好了,经过这样一番讲解,想必你已经对浏览器的前进和后退功能有了一个大概的了解了吧,那我们接下来就来了解一下History对象的三个方法。

二、History对象的引用


我们可以通过浏览器的全局对象window来引用History对象,像这样window.hisory ,也可以直接通过 history 来引用History对象。

window.hisory === history //返回 true

我们在浏览器的控制台中引用一下History对象,看看会返回什么

在这里插入图片描述

可以看到,返回的History对象中有许多的属性和方法,接下来我们就对这些属性和方法进行讲解。

三、History对象的方法


History对象一共有三种方法,他们分别是:

| 方法 | 描述 |

| — | — |

| back() | 加载前一个URL对应的页面 |

| forward() | 加载下一个URL对应的页面 |

| go() | 根据传入的参数加载某个URL对应的页面 |

这里我又把上面举过的例子拿了过来

在这里插入图片描述

总结一下,第一个杯子内最上面的绿块儿就代表当前页面,加载下一个URL对应的页面就是从第二个杯子的最上方拿一个绿块儿放到第一个杯子中;加载前一个URL对应的页面就是从第一个杯子的最上面拿一个绿块儿放到第二个杯子中。

  • back()

调用该方法不需要传递任何参数,直接调用即可。该方法会加载前一个URL对应的页面,相当于浏览器的后退功能。

//相当于执行了浏览器的后退功能

history.back()

动图展示

在这里插入图片描述

  • forward()

调用该方法不需要传递任何参数,直接调用即可。该方法会加载下一个URL对应的页面,相当于浏览器的前进功能。

//相当于执行了浏览器的前进功能

history.forward()

动图展示

在这里插入图片描述

  • go()

前两个方法都是加载上一个URL或下一个URL,相当于他们只能一次操作一个绿块儿,但 go() 方法允许一次性操作多个绿块儿。该方法需要传入一个整数作为参数,参数的规则为:

若传入一个正整数n,则表示加载接下来第n个URL,相当于执行了浏览器的前进功能n次;

若传入一个负整数n,则表示加载之前第n个URL,相当于执行了浏览器的后退功能n次;

若传入一个0,则表示刷新当前页面;

若省略该参数,效果跟传入0一样;

总结:

  • 函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;

  • 它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;

我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势

理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;

所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全

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

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

相关文章

【计算机网络】网络通信中的端口号

文章目录 一、引入端口号二、端口号的作用三、端口号的确定 在TCP/IP协议中,传输层有两个重要的协议:TCP(传输控制协议)和UDP(用户数据报协议)。TCP用于提供可靠的数据传输,而UDP则适合用于广播…

labview对位项目

带角度对位 1、上下拍照对照 项目类型:模组、PACK入箱,以下以模组入箱为例 项目目标:机器人抓起模组,通过上相机定位箱体上的销钉,通过下相机定位模组上的端板孔,计算出旋转偏移量XYR,让模组上…

苹果能引领端侧AI大模型时代吗?

苹果能引领端侧AI时代吗? 这份完整版的大模型 AI 学习资料已经上传CSDN,朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】 北京时间9月10日凌晨,苹果正式发布了iPhone 16,这是苹果第一款真正意义上的 …

精品PPT | 离散制造行业智能工厂总体解决方案

一、建设背景 离散制造业,包括机械制造业、汽车制造业和家电制造业等,其生产过程涉及多个不连续的工序,产品通常由多个零件装配而成。这类行业面临的挑战包括品种多、批量小、订单变化快、临时插单频繁以及外协件管理困难等问题,…

相机光学(三十七)——自动对焦原理

1.自动对焦的三种方式 目前在手机上采用的自动对焦系统包括反差对焦、相位对焦和激光对焦三种方案,下面我们来看一下它们的工作原理和相互之间的区别是什么。 1.1反差对焦【CDAF】- Contrast Detection Auto Focus 反差对焦是目前普及率最高、使用最广泛、成本相对…

Leetcode 701-二叉搜索树中的插入操作

给定二叉搜索树(BST)的根节点 root 和要插入树中的值 value ,将值插入二叉搜索树。 返回插入后二叉搜索树的根节点。 输入数据 保证 ,新值和原始二叉搜索树中的任意节点值都不同。 注意,可能存在多种有效的插入方式&a…

QT之QML学习五:添加自定义Qml组件

开发环境: 1、Qt 6.7.2 2、Pyside6 3、Python 3.11.4 4、Windows 10 重要的事情说三遍,使用自定义qml参考链接: Qt官网参考网址!!! 重要的事情说三遍,使用自定义qml参考链接: Qt官网参考网址!!! 重要的事情说三遍,使用自定义qml参考链接: Qt官网参考网址!!!…

2024年华为杯数学建模研赛 最全赛中助攻|选题建议+思路+代码+成品论文预定

2024年华为杯研究生数学建模竞赛(以下简研赛)将于9月21日上午8时正式开始。 下文包含:2024研赛思路解析​、研赛参赛时间及规则信息说明、好用的数模技巧及如何备战数学建模竞赛 C君将会第一时间发布选题建议、所有题目的思路解析、相关代码…

【2024】Benchmarking Foundation Models with Language-Model-as-an-Examiner

信息 阅读目的:李娟子老师团队,了解模型中的知识评测的工作 白雨时1*、嘉豪英2*、曹义心2、吕新1、何玉泽1, 王笑之1 、于吉凡1 、曾凯生1 、小易佳3 , Haozhe Lyu 4张嘉荫1李娟子1 , Lei Hou 1 凶 1清华大学,北京,中国2新…

AI菜鸟向前飞 — LangGraph系列之一:深入浅出解读Graph(一)

前言 LangGraph是一个使用 LLM 和 LangChain 构建有状态多参与者应用程序的库。 LangChain 允许您使用 LCEL(LangChain 表达式语言)构建链 AI菜鸟向前飞 — LangChain系列之六 - 深入浅出LCEL与Chain(上篇) AI菜鸟向前飞 — LangChain系列之七 - 深入…

ALIENTEK电容按键按键的介绍与驱动代码

目录 前言 电容触摸按键原理 硬件接线 检测电容触摸按键过程 驱动代码 tpad.h tpad.c main.c 按键扫描函数 前言 我没有独立的电容触摸按键模块,所以使用正点原子STM32F103ZET6精英版开发板上的电容触摸按键。采用STM32F103C8T6检测电容触摸按键&#…

WEB渗透权限维持篇-隐藏windows服务

往期文章WEB渗透权限维持篇-DLL注入\劫持-CSDN博客 WEB渗透权限维持篇-CLR-Injection-CSDN博客 WEB渗透权限维持篇-计划任务-CSDN博客 WEB渗透权限维持篇-DLL注入-修改内存中的PE头-CSDN博客 WEB渗透权限维持篇-DLL注入-进程挖空(MitreT1055.012)-CSDN博客 WEB渗透权限维持…

mysql设置数据库隔离级别及各个隔离级别的作用

一、通过命令设置隔离级别 # 设置全局隔离级别 set global transaction isolation level REPEATABLE READ; set global transaction isolation level READ COMMITTED; set global transaction isolation level READ UNCOMMITTED; set global transaction isolation level SE…

Reduce:一款开源的短网址平台!!【送源码】

今天给大家介绍一款开源的短网址平台,Coody Framework首秀,自写IOC、MVC、ORM、TASK、JSON、DB连接池、服务器。百毫秒启动,全项目仅2.5M(低配服可运行)。 前端采用Amaze UI,后端采用Coody Framework MVC&…

NGINX开启HTTP3,给web应用提个速

环境说明 linuxdockernginx版本:1.27 HTTP3/QUIC介绍 HTTP3是由IETF于2022年发布的一个标准,文档地址为:https://datatracker.ietf.org/doc/html/rfc9114 如rfc9114所述,http3主要基于QUIC协议实现,在具备高性能的同时又兼备了…

模拟面试后端开发复盘

目录 一:项目的系统开发和设计思路 二:Java的反射是什么?在项目中有用到吗? 三:多态的实现原理 四:项目中的redis是用在了哪里 五:Session和Cookie的区别,Cookie可以被修改吗&a…

socket通讯原理及例程(详解)

里面有疑问或者不正确的地方可以给我留言。 对TCP/IP、UDP、Socket编程这些词你不会很陌生吧?随着网络技术的发展,这些词充斥着我们的耳朵。那么我想问: 什么是TCP/IP、UDP?Socket在哪里呢?Socket是什么呢&#xff1…

又一款强大好用的Shell脚本项目,支持Bash,Sh、Dash、Ksh等,甚至可以在编辑器中直接用,程序员必备!(附源码)

作为一个程序员,肯定经常都要和shell脚本打交道,Shell脚本可以帮我们自动化各种任务,但也经常有格式错误、拼写错误、逻辑错误等等麻烦,而且它不会告诉你错在哪里! 今天就给大家分享一个超级实用的开源项目 - ShellCh…

【笔记】自动驾驶预测与决策规划_Part2_基于模型的预测方法

基于模型的预测方法 0. 前言1. 预测系统概述2. 定速度预测3.定曲率预测4. 短时预测与长时预测5. 基于手工特征的意图预测6: 基于模型的轨迹预测 0. 前言 本文主要记录课程《自动驾驶预测与决策技术》的学习过程,难免会有很多纰漏,感谢指正。 课程链接&am…

C++那些事之精选68道面试题

有小伙伴问我要一些C的学习题目/面试题目,我这里总结了一下分享给大家,大家可以自行去回答下面的问题,看看可以解答多少个。 注:懒人版附代码与答案会在文末星球详细讲解。 大纲 基础概念面向对象编程STL(标准模板库&a…