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:点击浏览器后退按钮将用户带回家[重复] 的相关文章

随机推荐