操纵浏览器历史记录 : popstate() 、 history.pushState() 、 window.history.pushState()

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

一、历史记录前进与后退

1.后退:

window.history.back() -- 相当于用户在浏览器的工具栏上点击返回按钮;

2.前进:

window.history.forward() -- 相当于用户在浏览器的工具栏上点击前进按钮;

3.移动到指定历史记录点:

通过go()方法,指定一个相对于当前页面位置的数值,从当前会话的历史记录中加载页面(当前位置页面索引:0,上一页:-1,下一页:1);

window.history.go(-2)--后退2页,相当于调用两次back();

window.history.go(1)--前进1页,相当于调用forward();

*可以通过window.history.length,得到历史记录栈中一共有多少页。

二、添加/修改历史记录条目

1.pushState(stateObject,title,URL):

逐条添加历史记录条目,

a.状态对象(stateObject)--一个JavaScript对象,与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态,popstate事件都会被触发,并且事件对象的state属性都包含历史记录条目的状态对象的拷贝;(ps:FireFox浏览器强行限制状态对象的大小为640k,超出则抛异常,可通过sessionStorage或localStorage存储大的数据)

b.标题(title)--传入一个简短的标题,标明将要进入的状态;(FireFox浏览器目前会忽略该参数,但是传一个空字符串会比较安全)

c.地址(URL)--新的历史记录条目的地址(可选,不指定的话则为文档当前URL);浏览器不会在调用pushState()方法后加载该地址;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常。

*某种意义上,调用pushState()有点类似于设置window.location='#foo',它们都会在当前文档内创建和激活新的历史记录条目。

(拓展:window.location--待研究)

2.replaceState():

history.replaceState()操作类似于history.pushState(),不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

3.popstate():

每当激活的历史记录发生变化时,都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建,或是被replaceState方法影响到的,popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

读取当前状态:

如果页面中使用pushState()或replaceState()方法设置了一个状态对象,然后用户重启了浏览器。当页面重新加载时,页面会触发onload事件,但不会触发popstate事件。可以使用history.state直接读取当前历史记录条目的状态,而不需要等待popstate事件

调用history.pushState()或者history.replaceState()不会触发popstate事件.pushState事件只会在其他浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法)。

调用方法:

window.onpopstate = function(event) {//做一些操作event.state; //  当前历史记录条目的状态 
};
或者:
window.addEventListener('popstate', function(event) {//做一些操作
});
 

 

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

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

相关文章

C++之拷贝函数

拷贝构造函数是一种特殊的构造函数,函数的名称必须和类名称一致,它的唯一的一个参数是本类型的一个引用变量,该参数是const类型,不可变的。例如:类X的拷贝构造函数的形式为X(X& x)。 以下情况都会调用拷贝构造函数…

spring Boot 学习(七、Spring Boot与开发热部署)

一、热部署在开发中我们修改一个Java文件后想看到效果不得不重启应用,这导致大量时间 花费,我们希望不重启应用的情况下,程序可以自动部署(热部署)。有以下四 种情况,如何能实现热部署。•1、模板引擎 – 在…

解决: Cannot find module ‘webpack-cli/bin/config-yargs‘、Error: Cannot find module ‘webpack-cli‘

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 npm 、cnpm 、node、vue 全都装上了,就是 webpack 装不上!! 最后我把整个服务器还原为初始设置了&…

路由器和交换机的区别详解

很多人对路由器和交换机混为一谈,甚至搞不清楚路由器和交换机有什么区别,有的用户还认为是一样的功能,看名字就知道是两种不同的产品,功能虽然有些类似,但绝对不会完全相同,否则就没有必要用两个全面不同的…

C++之构造函数和析构函数强化

构造与析构调用顺序: #include <stdio.h>class Test9_1 { public:Test9_1 (int a){m_a a;printf ("9_1 1111111111111111111构造函数....a: %d\n", a);}// 析构的顺序和构造的顺序相反&#xff0c;先构造的后析构~Test9_1(){printf ("9_1 1111111111111…

Oracle的逆向工程generatorConfig

<?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE generatorConfigurationPUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN""http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd"> <ge…

最简单、图解:阿里云服务器上装 Docker 、 CentOS上 docker安装(3分钟装完)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 // 为了装 vue 的 webpack &#xff0c;我把整个服务器重置了。docker 也没有了&#xff0c;只好重新装 docker ... 1. 准备工作 yum …

C++之对象的动态建立和释放

new和delete的用法&#xff1a; 1&#xff09;在软件开发过程中&#xff0c;常常需要动态地分配和撤销内存空间&#xff0c;例如对动态链表中结点的插入与删除。在C语言中是利用库函数malloc和free来分配和撤销内存空间的。C提供了较简便而功能较强的运算符new和delete来取代m…

7.11牛客题(指针)

今天在牛客做错了一道题&#xff0c;在此写下感触题目如下&#xff1a;若有说明:int i, j2,*p&i;,则能完成 ij 赋值功能的语句是&#xff08;B&#xff09;。A i*p; B *p*&j; C i&j; D i**p; 分析&#xff1a;题目中&#xff0c;p指针指向i的地址&#xff0c;A选项…

gpu简介

GPU英文全称Graphic Processing Unit&#xff0c;中文翻译为“图形处理器”。GPU是相对于CPU的一个概念&#xff0c;由于在现代的计算机中&#xff08;特别是家用系统&#xff0c;游戏的发烧友&#xff09;图形的处理变得越来越重要&#xff0c;需要一个专门的图形的核心处理器…

WM有约(五):部署应用程序

WM有约&#xff08;五&#xff09;&#xff1a;部署应用程序 Written by Allen Lee 创建安装包 创建一个新的项目&#xff0c;用来部署Windows Mobile应用程序的项目模板是Other Project Types\Setup and Deployment下的Smart Device CAB Project&#xff1a; 图 1 输入项…

“ 我亦想望,如池鱼悠悠 ... “

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 // 闹钟响了&#xff0c;起床&#xff0c;洗漱完毕&#xff0c;背上电脑出门&#xff0c;到公司打卡 8&#xff1a;20 。 " 我亦想…

C++之静态成员变量和静态成员函数

静态成员变量 关键字 static 可以用于说明一个类的成员&#xff0c; 静态成员提供了一个同类对象的共享机制 把一个类的成员说明为 static 时&#xff0c;这个类无论有多少个对象被创建&#xff0c;这些对象共享这个 static 成员 静态成员局部于类&#xff0c;它不是对象成…

熄火/死火

定义 当反应器正在以显著的反应速率进行操作时&#xff0c;若降低进料入口的温度&#xff0c;使它达到多重态区域的下限&#xff0c;反应速度会突然大幅度下降&#xff0c;反应基本上停止。这个现象称为熄灭。相应的入口温度称为熄灭点。一般指的是汽车熄火。发生原因 有…

H3C 以太网集线器

转载于:https://www.cnblogs.com/fanweisheng/p/11169349.html

解决: WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 问题描述&#xff1a;阿里云服务器 磁盘初始化之后用 git-bash ssh rootxx.xx.xx.xx 方式登陆服务器&#xff0c;报错如下。 WARNIN…

C++之面向对象模型

C对象模型可以概括为以下2部分&#xff1a; 1. 语言中直接支持面向对象程序设计的部分&#xff0c;主要涉及如构造函数、析构函数、虚函数、继承&#xff08;单继承、多继承、虚继承&#xff09;、多态等等。 2. 对于各种支持的底层实现机制。 在c语言中&#xff0c;“数据”…

netty接收大文件的方法

参考:http://blog.csdn.net/linuu/article/details/51371595 https://www.jianshu.com/p/a0a51fd79f62 netty默认是只能接收1024个字节&#xff0c;但是我们要传输大文件怎么办&#xff1f; 上代码&#xff1a; 改之后服务端&#xff1a; package server;import io.netty.boots…

制动失灵

定义 制动过程中&#xff0c;由于制动器某些零部件的损坏或发生故障&#xff0c;使运动部件(或运动机械)不能保持停止状态或不能按要求停止运动的现象。制动失灵的原因 制动失灵的关键在于制动系统无法对汽车施加足够的制动力&#xff0c;包括制动液管路液位不足或进入…

webpack 入门,说一下那些不入流的知识点、module.exports{ } 中配置说明

先说说Vue-Cli&#xff08;Vue项目脚手架&#xff09; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 关于它能干什么&#xff0c;就不再赘述了&#xff0c;我们主要谈谈生成的与webp…