JavaScript Confirm — Is it OK to leave/reload this page? #213
**If Windows is the AIR app 32bit or 64bit?
- 64bit
Which IDE are you using?
- Flash Builder
Which version of AIR are you using?
What steps will reproduce the problem?
- Load a website that utilises a close confirmation (prompts before one can close the window).
- Attempt to load() another URLRequest.
- What is the expected output? What do you see instead?
I understand why this is happening but there is no option to disable it. When attempting to load() another URLRequest, as popup appears:
Clicking OK allows the new URLRequest to take effect, otherwise the existing URLRequest remains. Hiding the WebView does not hide this popup. It’s created by the OS so one has no choice but to click OK or Cancel before being allowed to use the AIR application.
Please provide any additional information below.
- A stack trace if available, any Exception information.Screengrabs.
Does this problem also occur in the WebViewANE Sample Application provided?
JavaScript before leaving the page
But it confirm after page already closed? How to do it properly?
It would be even better if someone shows how to do it with jQuery?
10 Answers 10
onunload (or onbeforeunload ) cannot redirect the user to another page. This is for security reasons.
If you want to show a prompt before the user leaves the page, use onbeforeunload :
This will just ask the user if they want to leave the page or not, you cannot redirect them if they select to stay on the page. If they select to leave, the browser will go where they told it to go.
You can use onunload to do stuff before the page is unloaded, but you cannot redirect from there (Chrome 14+ blocks alerts inside onunload ):
How to show a 'Are you sure to leave?', 'Leave Site?', etc. dialog box in the browser before the user leaves using JavaScript?
To show ‘Are you sure you want to leave?’, ‘Leave Site’ or to show the dialog box which gives attention to the user when he/she closes the browser or reloads a tab, you can attach an event listener called beforeunload to the global window object using JavaScript.
It can be done like this,
Exit fullscreen mode
- The callback function in the addEventListener function will be passed an Event object, there you need to set a truthy value to the returnValue property in the Event object. In our case, we have set the value of boolean true to the property returnValue .
It would show a dialog box when the user leaves the browser like this,
There is one more way you can do the same thing by directly attaching the onbeforeunload function which returns a truthy value to the global window object like this,
Show Alert On Page Reload And Browser Back Button Click
When website users are asked to provide a lot of input, it is important to make sure that the data is not lost if something unexpected happens.
One way to ensure this is to store the data somewhere (e.g. in the local storage), so that when the user leaves the page — the data will persist on the next visit.
Another option is to display a popup that warns the user about the loss of the data when leaving the page.
In this article we will learn how to display such a popup using JavaScript.
Before Unload Event
The beforeunload event is fired when the window, the document and its resources are about to be unloaded.
It allows a web page to trigger a confirmation dialogue asking the user if they really want to leave the page.
In case of confirmation — the browser navigates to the new page, otherwise the navigation is aborted.
According to the specification — in order for a popup to be displayed, we just need to call preventDefault on an en event, however, one important thing to note is that it does not work for all browsers.
To support all browsers, in addition to calling preventDefault, we need to:
- Assign a string to returnValue of an event
- Return a string from the event handler
Some time ago this returned string was displayed in the confirmation dialogue, but now it is not in most browsers.
So, even if you return a custom message, most browsers would still display the default message which cannot be changed.
Also remember that you can’t change the design of this popup, you always have to stick with the default.
The Example
Let’s write some code that listens for the beforeunload event and triggers a popup:
Although the above code is written in React, it can easily be converted to vanilla JavaScript.
The above code in action (first I click a browser back button, second I refresh the page):
Browser Compatibility
The solution with the combination preventDefault, assigning string to returnValue and returning a string works in most browsers.
See the Browser Compatibility section to find out which browsers require which code in the event handler to work.
Also remember that it is possible to prevent browsers from listening for the beforeunload event with an extension or native setting, such as dom.disable_beforeunload in about:config in Firefox.
See this section to learn more about how the event behaves in different browsers.
Summary
In this article, we learned how to display a confirmation dialogue when the user presses the back button in the browser or reloads the page using the beforeunload event.
The beforeunload event is fired when the window, the document and its resources are about to be unloaded.
It works fine in most browsers if you follow 3 simple rules in the event handler: