Capture user response when using window.onbeforeunload
Is there a way to capture whether the开发者_JAVA百科 user clicked OK or CANCEL?
I need to do something ONLY if the user is leaving the page....
Here is the solution I am using in a situation where I need to do something (such as clear the session) ONLY when the user navigates from the page.
I have 2 global vars
var clearSession = true;
var confirmExit = true;
window.onbeforeunload = function() { return confirmExit(); }
window.onunload = function() { return clearSession(); }
function confirmExit() {
if (needToConfirm == true) {
return "exit page?";
}
}
function clearSession() {
if (clearSession == true) {
alert("Killing the session on the server!!!");
PageMethods.ClearSession();
}
}
Then of course, on every page submit/button/drop down list etc...you need to make sure that the above global variables are set to false.
Hope this helps someone.
No, browsers allow you to only specify the text in the alert box, but no way to catch the result.
You can use one setTimeout to verify.
window.onbeforeunload = function() {
if (needToConfirm) {
setTimeout(function() {
alert('User still is on the page');
}, 0);
return 'Are you sure you want to leave?';
}
};
Basically, the onbeforeunload function blocks the execution and the timeout will only be executed if the user still on the page. The 0 milliseconds is only to put it to the bottom of the execution queue.
This is a programming trick or rather a workaround which you can try. I did not find any "javascript provided" default ways to do it
I have a webpage (it has a form in it) sitting on a local system which needs to be protected from unauthorized users from entering any inputs to it.
I have created a JavaScript function which loads along with loading the main page.
like below
<script src="./resources/brazil-uam-all-javascript.js"></script>
</head>
<body id="uam_gui" onload="authenticate2();">
<div id="UAM_tool">
NOW THE JAVASCRIPT FUNCTION
The user is supposed to enter a value when prompted with a dialogue box. If the user does not enter any value and simply tries to bypass it by clicking on OK or CANCEL or uses the ESC key or the "Close" button to avoid authentication, then page will bounce back with the same prompt. Here I am indirectly capturing the user's response. Hope it help's your requirement.
function authenticate2() {
var prompt_for_the_magic_number = prompt("Enter Your M A G I C N U M B E R ::: ", "");
if (prompt_for_the_magic_number === true)
{
if (prompt_for_the_magic_number.length === 0)
{
alert("You are supposed to ENTER A VALUE");
location.reload();
}
else
{
if (prompt_for_the_magic_number.length > 4)
{
alert("You are supposed to ENTER ONLY 4 DIGITS");
location.reload();
}
esle
{
//some code to allow access based on a logic
}
}
}
else
{
alert("You are supposed to ENTER 4 DIGITS");
location.reload();
}
}
I ended up using a combination of beforeunload event and unload event. The idea is to use beforeunload event as a way to ask the question before closing the window and to use unload event to actually do stuff if the user confirms that he wants to leave the page. Example code in react:
const alertUserBeforeExit = useCallback(
(event: { preventDefault: () => void; returnValue: string }) => {
// prevent and ask the question
event.preventDefault()
event.returnValue = ''
},
[]
)
const onExit = useCallback(() => {
// the answer is yes, do some stuff here
}, [])
useEffect(() => {
window.addEventListener('beforeunload', alertUserBeforeExit)
return () => {
window.removeEventListener('beforeunload', alertUserBeforeExit)
}
}, [alertUserBeforeExit])
useEffect(() => {
window.addEventListener('unload', onExit)
return () => {
window.removeEventListener('unload', onExit)
}
}, [onExit])
加载中,请稍侯......
精彩评论