我必须在 React js 上的浏览器返回事件上显示警报。我曾尝试使用 ,addEventListener但我不确定将代码放置在 React 页面中的何处。我应该放置在任何生命周期钩子中还是在渲染中?我不知道。请帮帮我。
每当用户重定向到我网站中的另一个页面时,我在每个页面中都使用id来将页面滚动到某个固定的速率.我的问题是,用户需要双击浏览器的后退按钮将页面重定向到上一页,因此每当用户单击浏览器后退按钮时,我需要设置双击浏览器的后退按钮..
谢谢
/page.html#A给定从到 的导航/page.html#B,有没有办法区分用户:
/page.html#A?我正在构建一个网络应用程序,其中单个页面在多个内容幻灯片之间进行转换,每个内容都由特定位置哈希标识,例如'#A', '#B'。
例如,当用户位于幻灯片“A”上并选择选项“B”时,位置将从 更改/page.html#A为/page.html#B。
转换后,location.hash==#B、 和back()(通过 JS 或浏览器按钮)将使用户返回到location.hash==#A。
但是,没有什么可以阻止用户手动更改 URL 栏中的哈希值。在这种情况下,浏览器会认为这是向前导航,插入/page.html#B后退历史记录。也就是说,导航历史记录将是#A>> #B,#A并且单击返回现在会将用户带到#B。
我需要区分这两种情况,以便当我知道用户已手动更新 url 哈希时,我可以触发go(N)同步浏览器后退/下一个状态。
1)HTML5popstate事件:
我曾希望html5 popstate事件(https://developer.mozilla.org/en-US/docs/Web/Events/popstate)只会在case#1中被触发,但我可以确认它在这两种情况下都会发生火灾。
2)浏览器.onhashchange事件
我可以确认,如果存在,该事件在两种情况下都会被触发
hashChange()
3)我可以确认jQuery mobile在这两种情况下都会被触发
4)读取浏览器导航历史记录
我的下一个想法是维护一个哈希历史记录的JS数组,并比较新的哈希值和浏览器历史记录是否与JS数组匹配,但是出于安全原因JS无法读取浏览器位置历史记录。
我知道如果我调用 window.history.forward(),并且不存在页面,则不会发生任何事情。我正在考虑哈希历史记录的JS数组,调用forward(),检查新的location.hash(现在安全性允许),与JS数组进行比较,然后调用go(N)来同步浏览器后退/下一个状态。但有点乱。
我有两个处理后退和前进页面的自定义函数。当用户单击浏览器后退/前进按钮时,我也需要调用它们。
window.onpopstate = function() {
if ( /* back button clicked */ ){
showPreviousPage():
} else {
showNextPage();
}
})
Run Code Online (Sandbox Code Playgroud)
我怎样才能实现这个条件?换句话说,如何检测浏览器后退按钮被单击?
我在我的reactjs应用程序中使用react-router-dom进行路由。我想阻止用户在登录后返回,即我不希望用户在登录后点击浏览器上的后退按钮时再次返回登录屏幕。
我想创建一个按钮,它将运行以前运行的函数.即我点击按钮A运行功能A然后点击按钮B运行功能B我希望有一个按钮,允许用户通过单击后退按钮返回到功能A.
我以为我可以用一个全局变量来保存以前的语句,但它不会起作用,因为每个运行的函数都会覆盖存储的语句.这里有一些psuodo代码来解释我的意思
var globalvar;
globalvar = functionA;
function B { run globalvar};
Run Code Online (Sandbox Code Playgroud) 我想在用户单击浏览器“后退按钮”时警告用户,然后在确认后重定向。下面是我的 JS 代码,但仅适用于 Firefox,我想让它也适用于 chrome 和其他浏览器。
注意:为了在 chrome 中触发事件,我需要先点击页面正文,然后点击浏览器的“后退”按钮(这不好)。
请协助。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page2</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$(function(){
window.history.pushState({page: 1}, "", "");
window.onpopstate = function(event) {
if(event){
var confirm = window.confirm("Please, note that you may lose your move details by returning to the previous page.");
}
}
});
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)