Develop Reference

Prevent browser back button navigation without page focus or touch

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

How to stop refresh the page form the beforeunload event?

i'm using the 'beforeunload' event to detect the refresh event from the webpage.how to stop refresh the page from beforeunload event and i should not show alert message
window.addEventListener("beforeunload", this.onUnload);
onUnload = e => {
e.preventDefault();
// how to stop refresh the page from here and i should not show alert message.
//it is showing alert message. i no need to show the alert.
e.returnValue = "sure do you want to reload?";
}

It is not possible to prevent unloading a page without notifying the user.
Imagine you want to go to github.com at a time you are viewing stackoverflow.com - but it will simply prevent you from navigating away!
However, there was a time some browsers used to prevent unloading silently when you assign an empty string to the returnValue. But I believe that age of evil is gone now.

When i understand your following comment corectly, then you simply need to return zero, or false. So in your function you write:
onUnload = e => {
//e.preventDefault();
return false;
}
When i do this, i get an automated response from the Browser (for me its Chrome), if i really wanna close this website. And its in my language, so its i18n-compilant
It basically says "Are you sure you wanna refresh/close this website, data may get lost" and than 2 buttons with "Refresh/Close" and "Abort"

How Do I Use JavaScript To Prevent A Window From Closing Without The Popup With The "Are You Sure You Want To Leave This Page" Message?

I have a page for editing some data, and have some buttons for saving the data and closing the page. The page also has a modal popup for prompting the user if they want to exit without saving any changes they've made (if they have made any).
However, whilst this works when the user clicks on the buttons, this does not work if they click on the X at the top right corner of the window. I can get the page to stop when they click on this, and ask the usual "Are You Sure You Want To Leave This Page" message, but this isn't as nice as the modal popup, and I'd rather the user saw the same message regardless of which way they tried to exit the screen.
Can anyone explain how to prevent the window from closing if the user has made changes, but without using the "Are You Sure You Want To Leave This Page" message, so that I can show my nice modal version instead please?

You can't. If you could, it would get abused. So you can't. Your only option is the onbeforeunload handler, which will (with modern browsers) show a default message (no longer a custom message). That's it.
var showMessage = false; // set it to true when you want the message shown on exit
window.onbeforeunload = function(e) {
if (showMessage) {
var event = e || window.event;
var msg = "You have unsaved changes."; // Most modern browsers will no
// longer actually show this
// message, just their own.
// But to trigger it, you have to
// return one, so may as well make
// it useful.
if (event) {
event.returnValue = msg; // IE
}
return msg; // Everyone else
}
};

How to capture when a user is leaving ASP.Net page unexpectedly

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

Intercept selection in window.onbeforeunload dialog

in my web application if the user leaves the current page without having saved changes in the form a pop up window is opened to alert him about that.
For the pop up I use some scripts code injected from codebehind (C#):
var Confirm = true;
window.onbeforeunload = confirmClose;
function confirmClose()
{
if (!Confirm) return;
if(/*CHECK CHANGE CONDITION IS TRUE*/)
{ return " + WARN_message + "; }
}
I would need to intercept whether the user click on cancel or ok button.
I tried like:
var button_pressed = window.onbeforeunload = confirmClose;
But it returns always true.
How can get which button was pressed?
Thanks

Not possible. There is no event associated with the buttons.
What you might be able to do was to see if the user came back by setting a value or perhaps a cookie in the page in the onbeforeunload and test if it is there after some time has passed
but see the duplicate Way to know if user clicked Cancel on a Javascript onbeforeunload Dialog?