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.
Related
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.
I would like to display a confirm box and warn the user, before he leaves the page, especially during an HTTP request. To this end, I added an event listener to the window object within my react component.
componentWillMount() {
window.addEventListener('beforeunload', this.handleBeforeUnload);
}
componentWillUnmount() {
window.addEventListener('beforeunload', this.handleBeforeUnload);
}
handleBeforeUnload(e) {
e.returnValue = 'You sure you want to leave?';
}
This snippet works and makes our life easier but there's one thing that piqued my curiosity.
I see the confirm box, only if I click onto the page after loading.
It does not display the browsers native confirm box, although it triggers the handleBeforeUnload method.
Could someone explain, why window.onbeforeunload works only if I focus into the page?
This is an intentional limitation. From MDN:
Note: To combat unwanted pop-ups, browsers may not display prompts created in beforeunload event handlers unless the page has been interacted with, or may even not display them at all.
See: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
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);
I need to show a confirm dialog box when the user clicks the back button in mobile Safari. I have a long application, and I want to alert users that their application has not been filled out/completed before they leave the page. I have everything set up for when the user clicks a link and tries to leave the page, but I can not for the life of me figure out how to attach an event to the browser's back button. onbeforeunload does not work in iOS. Any tips would be much appreciated.
NOTE: I realize alert boxes are the spawn of satan, but that's what I was told to do.
You can check the persisted property of the onpageshow event. It is set to false on initial page load. When page is loaded from bfcache (user navigates back with back button) it is set to true.
window.onpageshow = function(event) {
if (event.persisted) {
alert("From back / forward cache.");
}
};
For some reason jQuery does not have this property in the event. You can find it from original event though.
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
alert("From back / forward cache.");
}
};
In desktop browsers like Chrome you can intercept the leaving of a page and show a message.
And you can't do anything, except for showing the message. The browser is doing the rest, for obvious reasons.
Dunno if this also works on iOS.
window.onbeforeunload = function () {
return 'do you really wanna do that?'
}
http://jsfiddle.net/JAAZ5/
Control over the back button has never been allowed in any browser. I suspect mobile Safari is no different.
I do understand that it's not possible to replace the beforeunload dialog with a custom one, and that if we need to set a custom message to the user, we'll have to return a string in our beforeunload handler:
{Custom message here set by returning a string in our beforeunload handler}
Are you sure you want to leave this page?
[Leave this page] [Stay on this page]
So, how about showing a custom modal dialog (maybe jQuery) before the actual beforeunload dialog is shown by the browser?
My current code uses Fancybox:
window.onbeforeunload = function() {
$.fancybox({ 'type':'iframe', 'href':'/PopupOnExit.php' });
return "Special offer! Stay on this page for more details.";
};
However, this shows the browser's dialog first, and only after clicking either "Stay" or "Leave" buttons does the browser show my modal dialog.
Is there any way to make my modal dialog show before the the browser's dialog?
The DOM modifications take effect only when your script ends execution. In this case, the native dialog is fired first for obvious security reason.
Note that due to the many security problem introduced by this unspecified feature (see the MDN doc), it will maybe be removed (the soonest the best in my opinion), the old reason to have it (save the data) being obsolete in the age of ajax.
unload and onBeforeUnload are very not cross-browser events. Be careful.
It's not work in Opera and sometimes in Chrome.