首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js判断页面是否是通过浏览器后退按钮返回打开的

分享一个bug的处理方法 # 背景 最近使用uni-app开发项目时遇到了一个bug,需求是需要在两个平台之间切换,A平台登录后要选择身份,选完后带着token进入另外一个平台B的个人空间,点击个人空间顶部的个人信息区域又可以切换到...这样子就产生了一个问题,点击身份的时候会生成新的token,但是页面是允许返回的所以url地址栏中的历史token还在,所以就会基于这个token触发请求导致接口报了Token验证失败的错误,一番搜索之后终于找到了解决办法...是W3C性能小组引入的新的API,目前IE9以上的浏览器都支持。...(用户通过后退按钮访问本页面) 255 : TYPE_RESERVED Any navigation types not defined by values above....所以我们只要判断type属性为2时就可以知道页面是通过返回按钮打开的了,然后开头的问题就可以据此加判断来解决token异常了。 ?

17K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【干货】JS如何判断用户是否点击浏览器“退回”按钮返回上一个界面?

    通过window的popstate事件可以监听history的变化,但是,popstate会在浏览器前进后退操作、history.go/back/forward调用、hashchange的时候被触发,它是一个复合事件...具体我总结为3步: 充实history stack,以提供更多信息让我们可以在用户刷新浏览器的情况下,仍然获得上下页信息关联 为history创建一个私有的记录值,用以区分history当前的state...和上一个state(我们在事件回调中只能拿到当前state) 通过第一步和第二步铺垫的内容,在回调函数中进行判断,从而知道是否是用户点击了“退回”按钮 接下来我们进行实施。...history是浏览器用户记录用户浏览器历史的全局对象,既然是“浏览历史”,那么就是一组单一数据的列表(有顺序),这个所谓单一数据,就是其内部的state概念,一个state表示用户在浏览一个界面(对应一个...href中使用#触发,例如 这种也可以做到无刷新的界面跳转,但是由于它走另外一个体系,也就是hashchange的体系,是比较老的技术,现在大部分框架都是基于

    6.7K50

    实现一个前端路由,如何实现浏览器的前进与后退 ?

    需求 如果要你实现一个前端路由,应该如何实现浏览器的前进与后退 ? 2. 问题 首先浏览器中主要有这几个限制,让前端不能随意的操作浏览器的浏览纪录: •没有提供监听前进后退的事件。...•用户可以手动输入地址,或使用浏览器提供的前进后退来改变 url。 所以要实现一个自定义路由,解决方案是自己维护一份路由历史的记录,从而区分 前进、刷新、回退。 下面介绍具体的方法。 3....3.2.3 实现浏览器的前进、后退 第二个方法就是:用两个栈实现浏览器的前进、后退功能。...我们使用两个栈,X 和 Y,我们把首次浏览的页面依次压入栈 X,当点击后退按钮时,再依次从栈 X 中出栈,并将出栈的数据依次放入栈 Y。...当你通过浏览器的后退按钮,从页面 c 后退到页面 a 之后,我们就依次把 c 和 b 从栈 X 中弹出,并且依次放入到栈 Y。这个时候,两个栈的数据就是这个样子: ?

    1.6K30

    iOS 11 更大的导航 (官方翻译版)

    有时,导航栏的右侧包含一个控件,如编辑或完成按钮,用于管理活动视图中的内容。在拆分视图中,导航栏可能会出现在拆分视图的单个窗格中。...导航栏控件 避免拥挤导管栏的控制太多。通常,导航栏不应包含视图的当前标题,后退按钮和管理视图内容的一个控件。如果您在导航栏中使用分段控件,则该栏不应包含标题或除分段控件之外的任何控件。...使用标准后退按钮。人们知道标准的后退按钮可以让他们通过信息层次来回溯步骤。但是,如果您实现自定义后退按钮,请确保它仍然像后退按钮,行为直观,与您的界面的其余部分相匹配,并始终贯穿您的应用程序。...如果用自定义图像替换系统提供的返回按钮人字纹,也可以提供自定义遮罩图像。iOS在使用此遮罩时,可以在转换期间为按钮标题设置动画。 不要包含多段面包屑路径。...后退按钮总是执行单个操作 - 返回到上一个屏幕。如果您认为在没有当前屏幕的完整路径的情况下,人们可能会迷失方向,请考虑对应用程序的层次结构进行展平。 给文本标题按钮足够的空间。

    2.9K30

    AngularDart 4.0 高级-路由概述 顶

    点击页面上的链接,浏览器导航到新页面。 点击浏览器的后退和前进按钮,浏览器会前后浏览您浏览过的网页的历史记录。 Angular路由器借鉴了这种模式。...当用户点击按钮,从下拉框中选择,或者响应来自任何来源的其他刺激时,您都可以进行命令式导航。并且路由器在浏览器的历史记录中记录活动,所以后退和前进按钮也起作用。...一旦应用程序启动完成,您将看到一排导航按钮和带有英雄列表的英雄视图。 ? 选择一个英雄,该应用会将您带到英雄编辑屏幕。 ? 改名字。 点击“返回”按钮,应用程序返回英雄列表,显示更改的英雄名称。...如果您点击了浏览器的后退按钮而不是“返回”按钮,该应用程序也会将您返回到英雄列表。 Angular的应用程序像正常的网页导航一样更新浏览器的历史。 现在点击危机中心链接查看正在进行的危机列表。 ?...点击浏览器后退按钮或“英雄”链接。 向上弹出一个对话框。 ? 您可以选择“OK”并丢失您的更改,或单击“Cancel”并继续编辑。 这种行为的后面是路由的routerCanDeactivate挂钩。

    6.1K20

    如何制作自己的原生 JavaScript 路由

    既然你看到本文,那意味着你可能也是其中的一个! 最重要的是,使用 vanilla JS router 可以减少你对框架的依赖。...太糟糕了,因为单击浏览器的“后退”和“前进”按钮与浏览历史记录中的 URL 导航有关。如果没有 History API,就无法谈论路由。...这取决于你的程序。可以是任何东西。 使“后退”和“前进”按钮起作用 通过使用 history.pushState,你将自动使 Back 和 Forward 按钮导航到上一个或下一个状态。...这是你必须再次更新视图的部分。(第一次是我们单击按钮时。) 但是由于该事件带有单击的 id,因此单击 Back 或 Forward 时很容易刷新视图并重新加载内容。...我们在这里没有使用 React 或 Vue,因此在我的源代码中 load_content 将负责直接在 DOM 中更新视图。此区域可能填充了你的 API 加载的某些内容。

    3.9K20

    浏览器history模式及Umi history的使用

    它提供了丰富的函数供开发者调用: push :向 history 栈里添加一条新记录,用户点击浏览器的回退按钮可以回到之前的路径; go:在 history 记录中向前或者后退多少步,参数是一个整数,可为正数可为负数...; goBack:返回上一页; forward():前进; replace:替换当前的 history 记录,跳转到指定的 url,不会向 history 添加新的记录,点击返回,会跳转到上一个页面,上一个记录是不存在的...+ 刷新 扩展: history.back 与 history.go 的区别: history.back(-1) 直接返回当前页的上一页,数据全部消息,是个新页面 history.go(-1) 也是返回当前页的上一页...a=b') history.push({   pathname: '/list',   query: {     a: 'b'   } }) // 跳转到上一个路由 history.goBack();...history模式及Umi history的使用

    8.7K21

    你能用 JavaScript 访问历史记录吗?

    使用JavaScript通过window.history对象来访问和操作浏览器的历史记录。window.history对象提供了一些方法和属性,跟踪浏览历史、导航到不同的页面以及对历史记录进行修改。...下面是一些常用的window.history对象的方法和属性: 1:history.length:返回浏览器历史记录中的页面数量。...console.log(history.length); 2:history.back():将浏览器导航到上一个页面,等效于用户点击浏览器的后退按钮。...history.back(); 3:history.forward():将浏览器导航到下一个页面,等效于用户点击浏览器的前进按钮。...history.go(-2); // 后退两个页面 history.go(1); // 前进一个页面 5:history.pushState(state, title, url):将一个新的状态添加到浏览器的历史记录中

    83050

    Visual Studio 调试系列4 单步后退来检查旧应用状态(使用使用 IntelliTrace 窗口)

    IntelliTrace 后退会在每个断点处及调试器步骤事件发生时自动拍摄应用程序的快照。 凭借记录的快照便可以返回到上一个断点或步骤,并查看当时应用程序的状态。...如果希望查看以前的应用程序状态,但不想重新启动调试或重新创建所需应用状态,使用 IntelliTrace 后退可以节省时间。   ...02 导航和查看快照 1、使用“调试”工具栏中的“后退”(Alt + [) 和“前进”(Alt + ]) 按钮,在事件间进行导航 。 这些按钮用于浏览“诊断工具”窗口中“事件”选项卡上显示的事件 。...看到的数据源于在该时间点拍摄的应用程序进程的快照。 因此,举例来说,如果命中断点并执行步骤 (F10),则“后退”按钮将在断点对应的代码行上将 Visual Studio 置于历史模式 。 ?...但是,IntelliTrace 只捕获已打开的“局部变量”和“自动”窗口中的数据,并且只捕获已展开的且在视图中的数据 。 在仅事件模式下,通常没有变量和复杂对象的完整视图。

    3K40

    Selenium3 + Python3自

    控制浏览器操作 控制浏览器窗口大小 在测试过程中,我们在打开浏览器后,根据需求可自定义调整浏览器的尺寸大小。WebDriver提供了set_window_size()方法来设置浏览器的大小。...如果页面没有最大化,可以调用driver.maximize_window()将浏览器最大化,相当于点击了页面右上角的最大化按钮,maximize_window()方法不需要参数。...、后退 在当前页面打开一个新的链接后,如果想回退到前一个页面,使用如下driver.back(),相当于点击了浏览器的后退按钮 和back操作对应的是浏览器前进操作driver.forward(),相当于点击了浏览器的前进按钮...driver.back() //回到上一个页面 driver.forward() //切换到下一个页面 下面举例源码如下: from selenium.webdriver import Chrome...,网页上显示的信息可能不是最新的,需要对页面进行刷新,使用refresh()方法刷新页面,相当于点击浏览器的刷新按钮。

    52810

    location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能

    在js跨域双向数据传递时可以用iframe加上location.hash来实现,在研究这个的时候深入学习了一下hash的特性。  ...当只有hash部分发生变化时,浏览器的历史记录会产生记录,但不会向服务器发出请求,这时按后退键地址栏的uri会变化但页面内容不变。  ...下面就讲述一下hash结合ajax的使用,ajax每次取数据时页面更新后浏览器并不产生历史记录,也就是说后退和前进按钮失去应用的效用,这时可以结合hash和window.onhashchange来使用,...注意ie6、7均不支持onhashchange,但可以用setInterval定期检查hash的改变,或者onload中检查的方法。  ...3.在使用window.onhashchange检测hash值获取历史数据。

    937100

    Matplotlib 中文用户指南 7.1 交互式导航

    以下是工具栏底部的每个按钮的说明: Home(首页)、Forward(前进)和Back(后退)按钮: 这些类似于 Web 浏览器的前进和后退按钮。 它们用于在之前定义的视图之间来回浏览。...它们没有意义,除非你已经使用平移和缩放按钮访问了其他地方。 这类似于尝试在访问新页面之前单击 Web 浏览器上的返回 - 什么都不会发生。 首页总是你第一个浏览的页面,以及你的数据的默认视图。...对于Home,Forward和Back,应该将其看做 Web浏览器,其中的数据视图是网页。 使用Pan和Zoom来定义新视图。 Pan/Zoom(平移/缩放)按钮 此按钮有两种模式:平移和缩放。...可以使用鼠标左键拖动半径轴标签。 可以使用鼠标右键放大和缩小半径刻度。 Zoom-to-rectangle(缩放到矩形)按钮 单击此工具栏按钮以激活此模式。 将鼠标放在轴域的某处,然后按鼠标左键。...在此模式中还有一个实验性的zoom out to rectangle(缩小到矩形),使用右键,将整个轴域缩小并放置在矩形定义的区域中。

    2.1K20

    浏览器的一个请求从发送到返回都经历了什么?

    解释 : 1:浏览器客户端向本地DNS服务器发送一个含有域名www.cnblogs.com的DNS查询报文。...这样我们只需要在浏览器中输入域名就能打开想要访问的网站了。目前,DNS域名解析技术的正向解析也是我们最常使用的一种工作模式。...所谓的递归查询,是指DNS服务器在收到用户发起的请求时,必须向用户返回一个准确的查询结果。如果DNS服务器本地没有存储与之对应的信息,则该服务器需要询问其他服务器,并将返回的查询结构提交给用户。...服务器响应请求 服务接收到客户端发送的HTTP请求后,查找客户端请求的资源,并返回响应报文,响应报文中包括一个重要的信息 -- 状态码。状态码由三位数字组成。...web服务器解析用户请求,知道了需要调度那些资源文件,再通过相应的这些资源文件处理用户请求和参数,并调用数据库信息,最后将结果通过web服务器返回给浏览器客户端。

    1.7K30

    React路由

    前端路由的功能:让用户从一个视图(页面)导航到另一个视图(页面) 前端路由是一套映射规则,在React中,是 URL路径 与 组件 的对应关系 使用React路由简单来说,就是配置 路径和组件(配对)...这个包提供了三个核心的组件 import { HashRouter, Route, Link } from 'react-router-dom' 使用HashRouter包裹整个应用,一个项目中只会有一个.../ 通过/home可以匹配Home父组件 再通过/list匹配子组件 编程式导航 场景:点击登录按钮,登录成功后...编程式导航:通过 JS 代码来实现页面跳转 history 是 React 路由提供的,用于获取浏览器历史记录的相关信息 push(path):跳转到某个页面,参数 path 表示要跳转的路径 go(n...): 前进或后退到某个页面,参数 n 表示前进或后退页面数量(比如:-1 表示后退到上一页) class Login extends Component { handleLogin = () =

    2K20
    领券