有没有办法阻止用浏览器后退按钮离开网页？

1）我试图找到一种方法来显示一个确认弹出窗口，通过浏览器后退按钮离开页面。卸载事件在这种情况下似乎不会触发。我正在使用angular2。我曾尝试订阅所有导航事件：有没有办法阻止用浏览器后退按钮离开网页？

this.router.events.pairwise().subscribe((e) => { 
    if (e[0] instanceof NavigationEnd && e[1] instanceof NavigationStart) { 
    console.log(e[0].id + " " + e[0].url + ", " + e[1].id + " " + e[1].url); 
    if (!this.whateverService.canNavigateAway) { 
     //var b = confirm("You have unsaved changes. Navigate away?"); 
    } 
    } 
});

但我似乎无法取消导航。

2）如果无法使用后退按钮取消导航，则会出现其他问题。我如何区分前进和后退，还是返回3页？那么知道浏览本地浏览器历史记录的页面的位置是很好的。我想知道，例如历史记录总共有7页，我们从索引5的页面导航到索引4的页面。这样我就可以导航回到我想要的位置而不会弄乱历史。

来源

2016-11-16 Zsolt Z.

你可以看看历史api。 https://developer.mozilla.org/en-US/docs/Web/API/History_API您可以使用pushState来放置一个伪造的URL条目。你也可以用伪造的#anchor标签来做到这一点，在页面加载时可能会触发虚假的点击。 – Keith

你可以查看历史API，当然，但请注意，历史API不会做什么*你要;它希望*你*做它想要的东西。这很奇怪和具有挑战性。 – Pointy

据我所知，尽管使用@keith建议使用虚假网址，但您无法控制它们。导航按钮存在于我们的总体控制范围之外，因为它们是浏览器本身的一部分，而不是网页，因此它们不能根据我们的请求明确停止。这些都是内置于浏览器中的内容，不应该混淆，因为您不希望导致不可预知的行为。围绕这个事实开发你的应用程序是比较聪明的，而不是试图去对付它。

此外，对于所有这一切，你不希望侵入浏览器。一旦你开始处理你没有明确创造或者被允许访问的东西，你就会穿过一条线进入假设之地，这是我学习的一个非常危险的地方。

如果您试图保持一个有状态的系统，那么可以在用户到用户的基础上对后端进行管理，这样做根本没有侵入性，并且可以提供令人愉快的用户体验，而不会阻碍正常的浏览器操作，

来源

2016-11-16 15:58:02 Turk

谢谢你的回答，我会尽力说服我的团队。 –

如果它足够让你可以做到这一点之前，表现出非定制警报/提示：

window.onbeforeunload = function() { 
    return 'Something that is not undefined'; 
}

测试在Chrome中，似乎你不能设置显示的警报文本。

编辑：我没有张贴的来源，因为它似乎并没有因为他们所描述的工作，但这里是MDN documentation和StackOverflow answer。

来源

2016-11-16 16:05:17 ArneHugo

如果他使用这个，他将不得不在每次刷新或提交或页面更改时处理它。 –

此警报仅在离开域时才显示（网址中第一个斜杠之前的任何内容都会更改）。也许这不是要求的？ – ArneHugo

嗨，我需要它显示每次用户按下后退按钮。即使他们从/ myapp/form1导航到/ myapp/form2。 –

有没有办法阻止用浏览器后退按钮离开网页？

回答

相关问题