HTML5-原生History

更多内容,访问:

history
hash
单页面应用和多页面应用
React-Router源码分析-History库
History库源码分析-Action 动作类型
History库源码分析-createLocation
History库源码分析-createPath
History库源码分析-parsePath

history


浏览器历史记录对象

属性:
  • length: 历史记录对象长度
方法:
  • go(n):

    跳转到相应的历史记录,以当前历史记录为标准线0,回到之前历史记录,为负值,比如回到上一页,n就是-1,向后,就是正值,如果n === 0,相当于刷新当前页面。

  • back():

    回到上一页,相当于浏览器后退按钮,也可以用go(-1)实现

  • forward():

    前进到下一页,相当于浏览器前进按钮,也可以用go(1)实现

HTML5 对 History API 新增的两个方法:pushState()、replaceState(),均具有操纵浏览器历史记录的能力

  • history.pushState(state, title, url)

    • state:用于存储该 url 对应的状态对象,可以通过 history.state 获取
    • title:标题,目前浏览器并不支持
    • url:定义新的历史 url 记录,需要注意,新的 url 必须与当前 url 同源,不能跨域

    pushState 函数会向浏览器的历史记录中添加一条,history.length 的值会 +1,当前浏览器的 url 变成了新的 url。需要注意的是:仅仅将浏览器的 url 变成了新的 url,页面不会加载、刷新。

  • replaceState:

    replaceState 的使用与 pushState 非常相似,都是改变当前的 URL,页面不刷新。区别在于 replaceState 是修改了当前的历史记录项而不是新建一个,history.length 的值保持不变。

监听事件


1. popstate事件

每当history对象出现变化时,就会触发popstate事件。

通过 a 标签或者 window.location 进行页面跳转时,都会触发 window.onload 事件,页面完成渲染。点击浏览器的后退键或前进键,根据浏览器的不同机制,也会重新加载(Chrome 浏览器),或保留之前的页面(Safari 浏览器)。而对于通过 history.pushState() 或 history.replaceState() 改变的历史记录,点击浏览器的后退键或前进键页面是没有反应的,那该如何控制页面渲染呢?为了配合 history.pushState() 或 history.replaceState(),HTML5 还新增了一个事件,用于监听 URL 历史记录改变:window.onpopstate()。

注意事项:

  • 仅仅调用pushState()方法或replaceState()方法 ,并不会触发该事件;

  • 只有用户点击浏览器倒退按钮和前进按钮,或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发;

  • 单纯的a标签不会触发;

  • 另外,上面浏览器回退和前进事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。页面第一次加载的时候,浏览器不会触发popstate事件。使用的时候,可以为popstate事件指定回调函数,回调函数的参数是一个 event 事件对象,它的 state 属性指向当前的 state 对象;

2. hashchange事件

每当hash值发生变化时,就会触发hashchange事件,hash值的变化也会触发popstate事件

注意事项:


  • 仅仅调用pushState()方法或replaceState()方法 ,并不会触发该事件;

  • 另外,上面浏览器回退和前进事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。页面第一次加载的时候,浏览器不会触发hashchange事件。使用的时候,可以为hashchange事件指定回调函数,回调函数的参数是一个 event 事件对象,它的 state 属性指向当前的 state 对象。

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

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

相关文章

来聊聊阿里1688 /拼多多API接口接入| 让需求回到产品端

昨儿办公室讨论起了1688。 对,就是阿里搞批发的那个网站。 在上面,你可以买到各种各样价格低廉的产品,比如,办公用具、女孩子的皮筋、小孩子的玩具等等。 在小批量上,它和拼多多定价类似,但二者的赛道却不同…

PHP 中传值与传引用的区别,什么时候传值什么时候传引用?

传值:当使用传值的方式时,函数或方法会创建原始变量的一个副本,并将该副本传递给函数或方法。在函数或方法内部,对副本的任何修改都不会影响到原始变量。当函数或方法执行完毕后,副本被销毁,不再使用。 传引…

Unity--互动组件(Toggle Group)||Unity--互动组件(Slider)

Toggle Group 属于同一组的切换开关受到限制,因此一次只能打开其中一个开关,按下其中一个开关时,其他的开关将会自动关闭; Allow Switch Off:(允许关闭) 如果禁用此设置,则按下当前…

开发《星球大战》小游戏的意义

开发《星球大战》小游戏的意义有以下几点: 学习和掌握游戏开发的基本技能:通过开发《星球大战》小游戏,可以学习和掌握游戏开发的基本技能,包括游戏策划、游戏设计、游戏编程和游戏测试等方面的技能。加深对游戏行业的了解&…

大数据HCIE成神之路之数学(2)——线性代数

线性代数 1.1 线性代数内容介绍1.1.1 线性代数介绍1.1.2 代码实现介绍 1.2 线性代数实现1.2.1 reshape运算1.2.2 转置实现1.2.3 矩阵乘法实现1.2.4 矩阵对应运算1.2.5 逆矩阵实现1.2.6 特征值与特征向量1.2.7 求行列式1.2.8 奇异值分解实现1.2.9 线性方程组求解 1.1 线性代数内…

GO 抽象工厂模式设计

既然工厂模式每个产品都需要实现对应的工厂类去生成相关实例,提取产品的共性,提高代码的内聚性, 就是抽象工厂模式要干的。在抽象工厂中,依然是不同产品对应不同的工厂类,但可以尽可能将具有相同共性的产品类别合在一起…

什么是虚拟DOM(Virtual DOM),说说工作原理

虚拟DOM(Virtual DOM)是一种将页面的状态抽象为JavaScript对象表示的概念,用于提高Web应用程序的性能和渲染效率。 虚拟DOM的工作原理如下: 1: 初始渲染:首先,通过JavaScript对象(…

Revive开发商加入VR开源标准OpenXR

导读作为一款能让HTC Vive用户玩到Oculus平台游戏的软件,它的开发商CrossVR今日宣布即将加盟为VR和AR应用程序开源组织,即OpenXR。 由Khronos Group引领的OpenXR旨在创建一个标准化且免版税的应用程序编程接口(API),该…

概念解析 | 光电神经网络:optoelectronic neural network

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:光电神经网络。 概念解析 | 光电神经网络的原理、挑战与未来 1. 背景介绍 在过去的十年中,深度学习和神经网络在许多领域取得了显著的成就,如图像识别、自然语言处理、医疗…

c++ call_once 使用详解

c call_once 使用详解 std::call_once 头文件 #include <mutex>。 函数原型&#xff1a; template<class Callable, class... Args> void call_once(std::once_flag& flag, Callable&& f, Args&&... args);flag&#xff1a;标志对象&#xf…

【算法专题】双指针

双指针 双指针1. 移动零2. 复写零3. 快乐数4. 盛水最多的容器5. 有效三角形的个数6. 和为s的两个数字7. 三数之和8. 四数之和 双指针 常见的双指针有两种形式&#xff0c;⼀种是对撞指针&#xff0c;⼀种是左右指针。 对撞指针&#xff1a;⼀般用于顺序结构中&#xff0c;也称…

【深度学习实验】网络优化与正则化(七):超参数优化方法——网格搜索、随机搜索、贝叶斯优化、动态资源分配、神经架构搜索

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、优化算法0. 导入必要的库1. 随机梯度下降SGD算法a. PyTorch中的SGD优化器b. 使用SGD优化器的前馈神经网络 2.随机梯度下降的改进方法a. 学习率调整b. 梯度估计修正 3. 梯度估计修正&#xff1a;动量法Momen…

【React】React 基础

1. 搭建环境 npx create-react-app react-basic-demo2. 基本使用 JSX 中使用 {} 识别 JavaScript 中的表达式&#xff0c;比如变量、函数调用、方法调用等。 if、switch、变量声明等属于语句&#xff0c;不是表达式。 列表渲染使用 map 。 事件绑定用&#xff1b;on 事件名称…

CentOS安装nodejs

查看可安装的版本 dnf module list nodejs选择需要版本安装 dnf module install nodejs:<stream>查看版本

67基于matlab图像处理,包括颜色和亮度调整、翻转功能、空间滤波和去噪、频域滤波和去噪、噪声添加,形态学操作、边缘检测及示波器集成的GUI图像处理。

基于matlab图像处理&#xff0c;包括颜色和亮度调整、翻转功能、空间滤波和去噪、频域滤波和去噪、噪声添加&#xff0c;形态学操作、边缘检测及示波器集成的GUI图像处理。数据可更换自己的&#xff0c;程序已调通&#xff0c;可直接运行。 67 matlab图像处理图像降噪 (xiaohon…

DPC15 国产带有 SPI 接口的独立 CAN 控制器兼容替代MCP2551

DPC15是一款独立控制器局域网络&#xff08;Controller Area Network&#xff0c;CAN&#xff09;协议控制器&#xff0c;完全支持CAN V2.0B技术规范。该器件能发送和接收标准和扩展数据帧以及远程帧。 DPC15自带的两个验收屏蔽寄存器和六个验收滤波寄存器可以过滤掉不想要的报…

vue安装three.js并创建第一个入门场景

vue安装three.js&#xff0c;并创建第一个入门场景 安装three.js npm install --save three引入three.js import * as THREE from threethree.js结构 three.js坐标 创建一个场景 scene场景&#xff0c;camera相机&#xff0c;renderer渲染器 创建一个场景 this.scene new T…

C#入门(1):程序结构、数据类型

一、C#程序结构 第一个C#程序 using System;namespace base_01 {class Program{#region 代码折叠块static void Main(string[] args){//控制台输出Console.WriteLine("Hello World!");Console.Write("C#是微软的编程语言"); //不换行输出//Console.Rea…

Pikachu漏洞练习平台之SSRF(服务器端请求伪造)

注意区分CSRF和SSRF&#xff1a; CSRF&#xff1a;跨站请求伪造攻击&#xff0c;由客户端发起&#xff1b; SSRF&#xff1a;是服务器端请求伪造&#xff0c;由服务器发起。 SSRF形成的原因大都是由于服务端提供了从其他服务器应用获取数据的功能&#xff0c;但又没有对目标…

canal1.1.7实战

1.环境搭建 canal可以用来监听mysql数据库的变化&#xff0c;用来同步数据 先下载最新的部署版本&#xff0c;release地址:Releases alibaba/canal GitHub 包下载地址: https://github.com/alibaba/canal/releases/download/canal-1.1.7/canal.deployer-1.1.7.tar.gz 下载…