Angular:点击浏览器后退按钮将用户带回家[重复]

2023-12-10

如果用户位于我的角度平台中,当用户单击浏览器的后退按钮时,我想将用户带到主页。

还有一个边缘情况需要处理, 如果用户通过谷歌搜索、Facebook 或直接输入链接来到我们的平台,那么我们不能执行此行为,但如果他已经在我们的平台中漫游,那么我们不希望每个后退按钮将用户带回家。

i.e.

  1. 用户输入链接并按下按钮 => 带他回家。

  2. 用户输入链接,现在单击按钮或链接,应用程序状态发生更改,现在用户单击浏览器后退按钮 => 将用户带回之前的页面(正常行为)

演示: 单击下面的链接,然后单击谷歌搜索上的第一个链接,然后尝试点击浏览器后退按钮,您将看到它带您进入主页。

我尝试使用pushState()来实现它

ngAfterViewInit() {
    console.log('init called');
    var x = document.referrer;
    console.log('ref', x);

    console.log(this.angLocation.path());

    if (x) {
      console.log('pushing state');
      this.location.pushState({id:'page3'}, 'Page3', '/page3');
    }
}

单击下面的链接查看其实际效果https://angular-tet5fy.stackblitz.io/page2?fbclid=IwAR1zP_UTnCQxKMp8o3ZXf-n4NR3ftu_4JoulLqItaONa-_wSPJ_DT95OgRU

预期行为: 1. 单击链接会将用户带到 page2。 2. 当 page2 初始化时,它应该将状态“/page3”推送到浏览器历史记录中。 3. 当用户单击浏览器返回时,它应该转到 /page3,因为它已在上面的步骤 2 中推送到历史记录。

目前的行为: 1. 单击链接,将我带到 page2,但在推送状态时它会自动重定向到 /page3。 2. 当点击浏览器后退时,我会回到/page2。


您可以使用history.pushState(null, null, 'https://twitter.com/hello');并将应用程序的主页链接作为第三个参数传递。在这种情况下,按返回会将用户移至主页。

看看这里;窗口历史API

Or: CSS 技巧

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular:点击浏览器后退按钮将用户带回家[重复] 的相关文章

  • 为什么我的事件处理程序会导致“不是函数”错误,但可以在 Firebug 控制台中运行?

    使用JQuery 1 2 6 在Firefox 3和IE7上进行测试 我有一些非常基本的 JavaScript 代码来重新加载验证码图像 在我的 JS 文件中 我有 var Captcha count 0 Refresh function
  • 在 IE8 中使用 javascript __proto__

    你好 我在 javascript 中有这两个对象 var john firstname John lastname Smith var jane firstname Jane 这样做 jane proto john 我可以访问 Jane 的
  • Javascript“this”在 IE 中丢失上下文

    以下在 firefox safari chrome 中工作正常 在 IE 中 this 似乎在 handleEvent 函数中丢失上下文 警报的结果是 object Window 这不是我想要的 当从handleEvent 输出时 this
  • 如何使用标准 JavaScript 在 CSS 转换结束后立即重新启动它?

    我构建了一种密码生成器 只要倒计时到期 它就会显示新密码 不幸的是 我只设法弄清楚如何运行我的代码一次 倒计时由一个简单的 CSS 过渡组成 我想保留它 因为它比我的其他尝试平滑得多 其中我尝试使用 JavaScript 重复更新宽度 va
  • 获取 CRM 2011 中功能区按钮的 ID

    我创建了一个 JavaScript 我想在其中隐藏功能区Reactivate Lead按钮取决于某些条件 我通过在表单上按 F12 获得了按钮的 ID 即lead NoRelationship Form Mscrm Form lead Re
  • 如何从 javascript 错误对象读取错误消息

    有人可以帮我解决以下问题吗 我正在通过 redux 操作进行后调用 如下所示 export const addEmployee firstName surname contactNumber email gt async dispatch
  • 如何在 Angular2 中注销时获取新实例/重新加载所有服务

    我正在开发 Angular 2 应用程序 它类似于最后提供的 Plunker 链接 在 HeroService 中 我有一个属性 clickCount 该属性将在单击英雄时增加 但是登录后我想重置这个参数 我不想使用该服务并重置其值 实际上
  • 有没有办法让 jslint 在 javascript 的下一行中使用大括号?

    我改变了我的编码风格 function getParams entity use strict var accountID store getItem AccountID switch entity case Topic to functi
  • 个人 Tumblr 帖子上的 Javascript

    我知道您可以编辑在 tumblr 博客上呈现所有帖子博客主页的 html AngularJS 但是 有什么办法可以添加自定义到各个帖子 我想在逐个帖子的基础上做一些 javascript 的东西 但似乎无法找到可以编辑代码的位置 或者 如果
  • setTimeout范围问题

    我在控制玩家重生的函数内部定义了一个 setTimeout 我正在创建一个游戏 var player death function this alive false Console log death var timer3 setTimeo
  • Angular UI-Router:多个 URL 到单一状态

    我已经开始使用 Angular 的 ui router 并且我正在尝试弄清楚如何让多个 URL 引用单个状态 例如 orgs 12354 overview retyrns the same pages as org overview 我的
  • jquery 中可点击 div 中的按钮

    我有整个 div 您可以单击它来切换该 div 的主要部分 问题是我在该 div 中也有可点击的按钮 当我点击它时 它会执行它应该做的事情 但同时也会切换整个 div 我怎样才能禁用它 Use event stopPropagation 单
  • IE localStorage 事件失火

    在 Internet Explorer 9 和 10 中 localStorage 实现意外地触发事件 这里有很棒的线索 Chrome 的 localStorage 实现存在错误 https stackoverflow com questi
  • 将文本字段限制为仅包含数字的最佳方法?

    I m using the following Javascript to restrict a text field on my website to only accept numerical input and no other le
  • Mat-自动完成表单控件名称

    我在 Mat Autocomplete 上使用 formControlName 时遇到问题 我不知道为什么 但我的 formControlName 不会发送数据 我是否写错了 当我尝试从 HTML 中删除 formControl 时 它总是
  • 此版本的 CLI 仅与 Angular 版本 5.0.0 或更高版本兼容错误

    我已经有 Angular 项目在 4 版本中运行 在安装新项目时 不幸的是我安装了 6 版本的 Angular cli 在以 4 版本运行的旧项目中运行 ngserve 命令时 这会引发错误 您的全局 Angular CLI 版本大于本地版
  • 如何将项目插入到特定索引处的空数组中?

    我想将一个项目插入到空数组的指定索引中 我看到有 Array prototype splice 方法 但是 如果我在空数组上使用 splice 它只会添加项目来结束数组 如下所示 var a a splice 3 0 item 3 cons
  • highchart堆积柱每个类别的总数据

    我想获取每个类别的总数据 这point stackTotal只给出活动数据的总数 从我粘贴的代码示例中 我想知道每种水果的总消耗量 因此 即使我单击右上角图例上的乔的名字 这使得堆叠图表上的所有乔信息都处于非活动状态 我仍然可以知道约翰 简
  • VS Code 扩展 - 获取完整路径

    我正在为 VS Code 编写一个插件 我需要知道调用扩展的文件的路径 无论是从编辑器上下文菜单或资源管理器上下文菜单调用还是用户只需键入扩展命令 function activate context get full path of the
  • Safari 扩展将消息发送到特定选项卡

    有没有办法从全局页面发送消息到特定选项卡 我目前正在做的是 在创建选项卡时 注入的脚本会创建一个唯一的 ID 并将包含该编号的消息发送到全局页面 并且全局页面会保存该编号 如果全局页面需要发送一些数据到一个tab 即 tab 3 然后全局页

随机推荐