首页
学习
活动
专区
工具
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如何判断用户是否点击浏览器“退回”按钮返回一个界面?

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

    6.6K50

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

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

    1.6K30

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

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

    2.9K30

    ionic监听android返回键实现“再按一次退出”功能

    1、这个功能需要我们用到ionic提供registerBackButtonAction方法(注册硬件后退按钮动作) registerBackButtonAction(callback, priority..., [actionId]) 参数 类型 说明 callback function 当点击返回按钮时触发,如果该监视器具有最高优先级 priority number 仅最高优先级会执行 actionId...(可空) * 该id指定这个动作 默认: 一个随机且唯一id 后退按钮优先执行顺序: 返回到上一个视图 = 100 关闭侧边菜单 = 150 关闭模版modal = 200 关闭上拉菜单action...sheet = 300 关闭对话框popup = 400 关闭加载框loading = 500 注意:返回: function一个被触发函数,将会注销 backButtonAction。...如果我们不想注册返回按钮影响所有页面,就要将返回函数再调用。 例如:如果一个上拉菜单已经显示,后退按钮应该关闭上拉菜单,而不是返回一个页面视图或关闭一个打开模型。

    1.8K20

    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.5K21

    你能用 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):将一个状态添加到浏览器历史记录中

    71450

    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()方法刷新页面,相当于点击浏览器刷新按钮

    52710

    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

    locationhash部分和使用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值获取历史数据。

    927100

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

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

    1.7K30
    领券