Confirmation on browsers back button - javascript

I need to control over back button. I checked similar posts it wont work as i expect.
I need to show custom confirmation message on back button clicked. If uses clicks 'Cancel', then they should stay on the same page.
Can anyone has ready sample code?
Thanks

Since the back button is part of the browser's functionality, not the web page's, the best you can do is handle the beforeunload event. This lets you provide a custom cancel message before the user leaves the page for any reason. Some intelligence about how you set up the handler and adding additional handlers to remove the beforeunload handler before taking links, etc. that should legitimately take the user to a different page can approximate the behavior you are looking for. See the example on the referenced documentation:
window.addEventListener("beforeunload", function( event ) {
event.returnValue = "a non-empty string";
}, false);

Use the
onbeforeunload
event instead. It'll triggered before user leaves the page.
Code example:
window.addEventListener('beforeunload',function(e){
!confirm('Do you want to leave?') && e.preventDefault();
},false);

Related

How to disable "Leave site?. Changes you made may not be saved" pop up in angular?

I'm trying to close the browser after I have reached a order confirmation page and it throws a alert as shown below. This creates a misconception to user that his changes are unsaved. So I want to avoid this pop up.
I know this alert is triggered because of beforeunload event.
Solution that I have tried:
window.addEventListener("beforeunload",(event)=>{
return null;
})
and
window.onbeforeunload=null;
I'm not using jQuery in my application. Is there any other way that I can disable this event from firing.
Links that I have tried:
How to disable/override "Do you want to leave this site?" alert?
Disable "Changes you made may not be saved" pop-up window
How to disable "Changes you made may not be saved." dialog box (Chrome)?
None of them are working for me.
How can I achieve this without jQuery?. What I'm confused about is how to handle this event so that it doesn't show the pop up.
I'm using Chrome Version 101.0.4951.64
This could be due to some third-party library or other functionality in your code that listens for the "beforeunload" event and perhaps modifies the value of event.returnValue.
This workaround may work for you.
window.addEventListener('beforeunload', function (event) {
event.stopImmediatePropagation();
});
This will prevent the execution of the other listeners in the chain.
It is important to include this code at the top of the app to ensure that your function is executed first.
In the case of Angular, a good place can be in the ngOnInit of the AppComponent.
Check here.
Just adding a MDN documentation of beforeunload event for reference.
https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
When this event returns (or sets the returnValue property to) a value other than null or undefined, the user will be prompted to confirm the page unload.
Internet Explorer does not respect the null return value and will display this to users as "null" text. You have to use undefined to skip the prompt.

How to really disable beforeunload?

A lot of web pages try to make you don't exit them by using the beforeUnload event on JS. Facebook, for instance, will show a warning if you try to use back / forward button , as the image below shows :
To avoid this i always used the code below to 'unbind' the event :
window.onbeforeunload = null;
But this is not working anymore. Even after running the code below, the warning message will still shows if i try to leave the page.
How to really get rid of these messages in a web application ? Facebook is only an example, i'm trying to do this using JS for study purposes.
The event is probably being registered via addEventListener rather than onbeforeunload. You could try adding a new event listener that overrides the previous one.
window.addEventListener("beforeunload", (event) => {
event.stopImmediatePropagation();
}, true);
The third parameter being true causes the event to go all the way down, so any other listeners will be prevented.

event to be triggered when user leaves ckeditor or page

I have been trying to find an event that will trigger when a user leaves the ckeditor window or page in any way, this is because I want to call my save method inside the event so that when the user does try to leave their content is saved. I have inserted a conditional statement with an alert to test if its working but so far the alert hasn't been called signifying that the event I am currently using is not the correct one
here is my code block:
$(window).on('beforeunload', function() {
updateBlockByName(blockname, escape(newhtml), 1, blockid, disableBlogComment);
if (updateBlockByName) {
alert('unload save test');
}
});
any help is greatly appreciated
Actually beforeunload is broken pretty badly (probably by design) in Blink and it doesn't handle alert or other modal dialogs. If you want to display a message, you can use return:
$( window ).on( 'beforeunload', function() {
return 'Message for the user';
}
It will display a confirm dialog with "Leave page" and "Stay on page" buttons.
Moreover, there is also the unload event, but it's as unreliable as beforeunload. And both of them don't work well on mobile devices.
Probably a good idea is not to rely on detecting the unloading of the page, but rather changes in visibility, via e.g. the pagehide event. It will also handle all cases when the user puts your page in the background and simply forgets about it.
A very detailed article about pagehide, beforeunload, unload and other similar events is available on Ilya Grigorik's site.
And if you want to detect only leaving the editor, you can probably just listen to CKEditor's blur event. It's fired when the user moves the cursor outside of the editor.

How does StackOverflow implement a pop-up box before you close the tab while you are writing an answer? [duplicate]

How can I ask the user Are you sure you want to leave the page?
Like for example if you click the back button while asking a question on Stackoverflow?
The easiest way to do this is to bind an event handler to the "unload" JavaScript event. jQuery makes this very easy to do with its .unload() event handler. In the method you bind you can check to see if any the page's form fields have text input. Assuming they do pop an alert notifying the user they'll lose any unsaved data if they navigate from the page.
This method will fire an alert whenever the user navigates away from the page for any reason.
$(window).bind('beforeunload', function() {
alert('Handler for .beforeunload() called.');
});
That's obviously not very user friendly but a couple of quick modifications can make it workable to your question.

How can I ask a web user for confirmation if he really wants to leave the page?

How can I ask the user Are you sure you want to leave the page?
Like for example if you click the back button while asking a question on Stackoverflow?
The easiest way to do this is to bind an event handler to the "unload" JavaScript event. jQuery makes this very easy to do with its .unload() event handler. In the method you bind you can check to see if any the page's form fields have text input. Assuming they do pop an alert notifying the user they'll lose any unsaved data if they navigate from the page.
This method will fire an alert whenever the user navigates away from the page for any reason.
$(window).bind('beforeunload', function() {
alert('Handler for .beforeunload() called.');
});
That's obviously not very user friendly but a couple of quick modifications can make it workable to your question.

Categories