I have a function like this to prompt the user to confirm they want to navigate away from the page:
window.onbeforeunload = function() {
return "You may lose any unsaved changes.";
};
Now I'd like to check whether this is a just a page refresh (F5), and not render the message in this case. Is this possible?
Thanks
Nope, that's not possible, there is no way to find out if the refresh button of browser was pressed.
Related
so I'm making a drawing app. the problem is, when the user accidentally closes or refreshes the page, all the drawings will be lost. So I made a confirmation box that will confirm if the user really wants to close the page.
I have tried like this:
if (window.onbeforeunload == true ) {
confirm("Change are still not saved. Are you sure?")
}
But it doesn't work. Then what is the best solution to solve this problem?
onbeforeunload is a function which is called when leaving the page. So you have to define it.
window.onbeforeunload = function()
{
return "Change are still not saved. Are you sure?";
};
Without clicking/touching on anywhere inside page when click browser back button, navigation should be disable.
Below implementation only work when click inside page.
history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () =>{ // not getting activate without clicking inside page
console.warn('DISABLE BROWSER NAVIGATION');
history.forward();
}
one of the best way is to open your application in a popup without controls but again depending upon your requirement this may not be applicable. Hope this helps. Something like below
function openPopup(){
var pathname = (window.location.pathname);
window.open(pathname+'openpagePopup.html','','width=800,height=450,toolbar=no, menubar=no,scrollbars=no,resizable=no,dependent,screenx=80,screeny=80,left=80,top=20,scrollbars=no');
return false;
}
The otherways are not trustworthy like you can show user an alert, but can not disable the back button, as per my knowledge. If you do the below make sure you check browser compatibility.
window.onbeforeunload = function() {
return "Write something here";
};
Update : I found there is a way to handle the page history. Incase that works, I have never tried, here is a link
JS - window.history - Delete a state
I have the following code:
<html>
<head>
</head>
<body>
<form method="post" action="something.php" name="myForm">
<input type="submit" name="homepage" value="Please Work" id="homepage">
</form>
<script>
var btn = document.getElementById('homepage'),
clicked = false;
btn.addEventListener('click', function () {
clicked = true;
});
window.onbeforeunload = function () {
if(!clicked) {
return 'If you resubmit this page, progress will be lost.';
}
};
</script>
</body>
</html>
This code pops a confirmation box when the user leaves the page (Back or Refresh Browser Button) but not when a button inside the form is clicked.
QUESTION
How can I redirect to a different page when the user clicks the "Leave this Page" button of the confirmation box? I tried different methods but it does not work. I'm using Google Chrome.
Any help is very much appreciated. Thank you in advance. :)
EDIT
So I got some codes that actually works but it does the opposite. When I click the "Leave this Page" it stays and when I click "Stay on this Page" it redirects.
var onUnloadClick = 0;
function redirectTimer() {
setInterval(function(){window.location = "sample exam.php"},10);
}
var btn = document.getElementById('homepage'),
clicked = false;
btn.addEventListener('click', function () {
clicked = true;
});
window.onbeforeunload = onbeforeunload_Handler;
function onbeforeunload_Handler() {
if(!clicked) {
if(onUnloadClick == 0) {
redirectTimer();
return 'If you resubmit this page, progress will be lost.';
}
}
};
QUESTION
How will I modify this code and do the opposite function?
You can't mess with the browsers processes. If you click back, it will go back. If you click refresh, it will refresh the page. The reason they're in there is because they have their functions. You can try different approach in doing what you want but I don't think this one is possible.
I dont think that its possible. Check out answer here:
Intercept selection in window.onbeforeunload dialog
There is not defined way to intercept the onbeforeunload event. Further reference can be seen here:
Intercept selection in window.onbeforeunload dialog
When onbeforeunload event is kick started the user has already selected where he\she wants to go; it would not make sense if the browser allows javascript on a webpage to override the actions of the user.
Hence there should not be anyway for you take the user to some other location other than where the user wants to go.
Updated Answer to the Updated Questions:
Its not possible to do what you are trying to do. The reason you get redirected when you choose "stay on this page" and not otherwise is because your javascript function to redirect comes into effect only why you stay on the page. When you choose to leave the page the browser will no longer execute any of your code. Because the browser does not want you to override the choice fo the user.
My recommendation:
Rethink what you want. You want to redirect the user to a different page when the user is trying to go somewhere else. I really don't think that is the correct.
What is your ultimate goal? If you let me know that.. probably I can provide you with a better solution.
I need js function that show alert window on reload or when closing tab asking me if I'm sure that want to reload or close tab. If not, Stay in page without loosing content.
The browser feature that you want is called the onbeforeunload event.
window.onbeforeunload = function(e) {
return 'Are you sure you want to leave? You are in the middle of something.';
};
When the data has been saved, you can clear the event like this:
window.onbeforeunload = null;
I need to prompt a user when they are leaving my ASP.Net page unexpectedly with a message to ask if they are sure they want to leave. A post back or when the save button is clicked should not fire the warning. There are a bunch of articles covering this but I am brand new to this and appear to have got my wires crossed.
The recommended way appears to be to use the window.onbeforeunload event but behaves unexpectedly for me. This is fired when the page loads as opposed to when the page unloads.
<script language="JavaScript" type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit() {
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>
If I use the JQuery implementation it fires when the page unloads but the problem is it fires before the code behind is executed. So I cannot set a variable on the client saying don’t fire the event this time as it is a post back or a Save.
$(window).bind('beforeunload', function () {
return 'Are you sure you want to leave?';
});
Can anyone point me in the correct direction as I know I am making basic mistakes/miss-understanding?
Edit:
So I am nearly there:
var prompt = true;
$('a').live('click', function () {
//if click does not require a prompt set to false
prompt = false;
});
$(window).bind("beforeunload", function () {
if (prompt) {
//reset our prompt variable
prompt = false;
//prompt
return true;
}
})
Except the problem is in the above code I need to be able to differentiate between the clicks but I haven't been able to figure that out yet i.e. I am missing a condition here "//if click does not require a prompt set to false".
Any ideas?
Thanks,
Michael
You can try using this:
$(window).unload(function(){
alert('Message');
});
In case people are interested this is the roundabout solution to my problem. How to tell if a page unload in ASP is a PostBack