gpt4 book ai didi

javascript - 如何对 onbeforeunload 中的子事件使用react?

转载 作者:行者123 更新时间:2023-11-27 23:07:06 25 4
gpt4 key购买 nike

我注意到事件onbeforeunload能够区分不同的用户操作,例如用户是否按下了页面上的链接、用户是否尝试关闭页面、用户想要返回一页等。

例如,如果用户单击链接,则会出现一个带有文本“您确定要关闭该页面吗?”的确认框,但如果用户按 F5 刷新页面,则该框的文本为“您确定要刷新页面吗?”。

是否可以区分onbeforeunload的不同子事件并对其使用react?

我尝试的是,如果用户尝试离开页面,则将页面的背景颜色更改为红色;如果用户尝试刷新页面,则将页面的背景颜色更改为橙​​色,这只是一个简单的测试操作,以便更好地理解。

注意:我将提示中的文本从德语翻译成英语,因此文本可能会有所不同。

附带问题:如果我在本地网络服务器上运行此代码,那么如果我点击链接并按“离开页面”,为什么确认框会出现两次,但如果我在 stackoverflow 上运行它,则不会出现两次?

function ask()
{
return "Are you sure?";

//How can i find out what the user actually tried?
//e.g. did he tried to refresh the page? Or did he tried to close it?
//PSEUDO CODE:
// if (user_tried_reload) { alert("RELOAD"); }
// else if (user_tried_close) { alert ("CLOSE"); }
}
<body onbeforeunload="return ask()">
<h1>onbeforeunload Test</h1>
<a href="http://www.google.de">Google</a>
</body>

用法:按“运行代码片段”,然后单击链接或尝试刷新页面。

最佳答案

代码触发两次的原因是因为“离开页面”按钮重新触发了卸载事件。

我建议您做的是捕获 F5 按键事件并执行您自己的消息:

document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 116) {
ask('reload');
}
};

在你的ask()函数中,我想要这样的东西:

var howmanytimes = 0;
function ask(action)
{
howmanytimes++;

//PSEUDO CODE:
if (howmanytimes == 1) {
if (action == 'reload') { alert("RELOAD"); }
else { alert ("CLOSE"); }
} else { howmanytimes == 0 };
}

这段代码未经测试,我无法从我所在的位置访问 jsfiddle,希望这能为您指明正确的方向(并且我一开始就正确理解了这个问题!)

关于javascript - 如何对 onbeforeunload 中的子事件使用react?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36493993/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com