How to confirm closing browser window? - javascript

The question is
How to show a confirmation box on closing a browser window ?
This question has been asked many times before, and previous answers, such as https://stackoverflow.com/a/333673/1442181 suggest to use the onbeforeunload event.
But, according to http://developer.mozilla.org/en-US/docs/Web/Events/beforeunload, "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."
I have a preview page after the user has filled some form, and I would like to show a confirmation prompt when the user leaves the page (except by clicking "back to edit" or "submit"). The preview page cannot be interacted with, so previous solutions seem to not work e.g. in the current firefox version.
(How to avoid the prompt on these two links is not part of the question and answerred in detail elsewhere.)

Related

show custom popup on page refress and browser/tab close in javascript/jquery

I want to open popup when closing the tab or browser first time and get the user review. I used onbeforeunload(), but I need to handle page refresh and tab close deferent different event.
Short answer: You can't.
Longer answer: For rather obvious "security" reasons it is very limited what you can do when a user tries to navigate away from a page / close a tab or in any other way leave the site.
The reason is that browsers want to make absolutely sure that you cannot prevent the user from closing a tab or window that he / she wants to close.
Therefore the onbeforeunload javascript event - and by extension the beforeunload jQuery event - are extremely limited in what they can do. One of the things they definitely cannot do is prevent the page from closing - except using one very standardized and rather boring method the browser (usually) allows.

Display a customized confirm box in angularjs when user leaves a page

My requirement is to display a customized confirm box when the user leaves a page without saving form data.
I used the window.onbeforeunload event it is displaying google chrome related predefined confirm box. When the user changes any form and trying to reload, tab close or route change I want to display a $mdDialog.confirm and asking user to leave the page or stay on the same page. How do I make one?
For security reasons, this cannot be done. You can find more details in the MDN page on the beforeunload event.
In the past, you could return a custom string that was displayed to the user, but these days even that is ignore. The best you can do is instruct the page to show the standard dialog that you already have. (And in some browsers and some scenarios, even that instruction may be ignored.)
An alternative is to include a button in the page for leaving the form. Although that still does not prevent users from navigating away from the page directly, if it is sufficiently visible, in many cases users are more likely to click that than navigating directly. It also serves as a passive reminder that the form needs explicit saving or cancelling (depending on your specific details, of course).

How can I replace window.onbeforeunload with custom code?

For accessibility reasons, for my Chrome extension, I need to be able to replace all standard window.onbeforeunload popups with an in-page HTML substitute. I know how to create a substitute skeleton, that's trivial.
And I know the basic idea here is window.onbeforeunload = {my substitute code}.
What I don't know how to do is grab the text and code from each confirmation window that a page issues, and channel it into my substitute, so that the same message is shown as would be in the original popup and clicking my substitute confirm and leave page (or whatever) buttons yield the same result as the original popup.
How can this be done?
EXAMPLE:
You have my extension installed (don't ask what its purpose is, irrelevant).
You start writing a question on StackOverflow, then realize you already know the answer and go to close the tab.
Normally, a confirmation window would come up asking if you're sure you want to leave the page.
But because of my extension, instead, the whole page's HTML gets shoved down a bit to make room for a temporary HTML confirmation box is shown with the same text and the same two buttons that yield the same two results when clicked, all in-page. No pop-up.
The feature you're talking about is the window.onbeforeunload event, and unfortunately the only way it can be customized is to provide a custom string message for the user, because the potential for abuse is so high.
The api reference over at msdn for Internet Explorer states:
The default statement that appears in the dialog box, "Are you sure
you want to navigate away from this page? ... Press OK to continue, or
Cancel to stay on the current page.", cannot be removed or altered.
I take this to mean the dialog itself cannot be altered, all you can do is provide an additional context-specific message. I cant locate the same reference for Chrome, but it seems to be the same story there.
window.onbeforeunload = function() {
//all you can do is provide a message..
return "you have unsaved changes, if you leave they will be lost";
}

How to select “Cancel” by default in confirm box when closing a browser tab

I know there is a very similiar question (JavaScript: How to select "Cancel" by default in confirm box?) on this site, but I felt like I did not get a good answer out of that one as my premises are not the same.
Problem description: I am writing a web browser Javascript popup window that is supposed to take some information as input and the user can choose between "OK" to process the information and continue with whatever, or "Cancel" to close the window and go back to whatever. So far so good. The problem is that some users press "X" in the upper right corner of the popup to close the window (either by mistake or actually believing that the data is processed) and get a second dialog popup (you cannot change the text in this dialog) displaying "Are you sure you want to navigate away from this page?" - "Press OK to continue, or Cancel to stay on the current page" - OK/Cancel... Now, some of the users just press enter on their keyboard and oops, the popup is closed and all information is lost.
Question: Can you, or is there a workaround to set focus on "Cancel" instead of "OK" when it comes to the dialog of whether to close an Internet Explorer popup/tab or not?
Thank you in advance! =)
Unfortunately, I don't think it's possible to change focus on browser-generated dialog boxes.
As Deestan suggested, maybe you can create a faux popup using js and css, and do whatever you want in terms of styling it, and still have the user enter information, and have the information passed to your code.
From what i've heard/read, it's generally accepted that using alert() or popup() for anything other than debugging is frowned upon.

Prevent JS-Window from closing without showing a prompt

In my MS CRM 4.0-application, there are several things to do before the window is closed.
So I have to stop the window from closing in the onbeforeunload-function and do my stuff in different locations.
This works already, but only if I show the dialog by returning some message in my onbeforeunload-function and the user chooses "stay on page" (or something like this)
Is it possible to skip this dialog and stop the window from closing?
I know there are several reasons, why this shouldn't work, but, e.g. in my CRM-application it is neccessary.

Categories