I have one HTML page which contains only info, no user input, and redirects after 3 seconds. Is it possible to prompt a confirmation message if the user decides to close the tab?
That method only works if there is some user interaction like clicking on the page or adding text to input:
<script type="text/javascript">
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = '';
});
</script>
If you take a look at the Mozilla Docs, you will see a note as follows.
To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with. Moreover, some don't display them at all.
So no. The onbeforeunload property should not really be used as you can not rely on the browser honouring it.
Related
I'm trying to confirm before user leaves the page and I used this solution
<script>
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
</script>
but this only works when you interact with something on the page like maybe a clicking or typing, it doesn't work when you directly close the page
and I made a logging only popup page i.e. there is nothing on the page to interact with, so how do I still get it to confirm before leaving?
In the docs
According to the specification, to show the confirmation dialog an event handler should call preventDefault() on the event.
So, you should at least do
window.onbeforeunload = function(e){
e.preventDefault();
return 'Are you sure you want to leave?';
};
However the docs also state
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.
So you might be all out of luck with a completely empty page you have not interacted with.
Basically what i am trying to do was, whenever a user tries to close the current tab(when he was on my site), i want to display a pop up with three choices about why he was leaving and want to store that choice some where
So i have written the following in main.js which will be loaded through entire site pages
$(document).ready(function() {
// Before closing the current tab, ask user for a reason
$(window).on('beforeunload', function(event){
$('#load_choices_up').click();
event.stopPropagation();
event.preventDefault();
debugger;
});
});
So i have three issues with the above jquery code
*.This code was executing even when i click another link on the same page(I mean if i navigate to another page from current page), but i only want this code to run when the current tab/page was closed(about to close) completely, but not when navigating to another page on my site
*. After this line $('#load_choices_up').click() was executed, a choices pop up was opening as expected, but immediately the default processing of browser(that is closing functionality) was not being stopped with two lines event.stopPropagation(); and event.preventDefault();, i mean these two methods of stopping the behaviour is not working and the browser is closed, but i want to do some processing based on user choices input and then based on that i will close tab.
*. When i used return "Why do you want to leave the page", instead of choices pop up, the browser was displaying different message based on browser type like "You have unsaved changes" in chrome, and some different message in firefox, instead of displaying my custom message
So finally, why event.stopPropagation(); and event.preventDefault(); are not working ? and why i can't able to display my custom message ?
You can't prevent someone from closing the browser. This is for obvious security reasons. Imagine a spam-website preventing you from closing the website while pumping you full of god knows what.
You can at most pull one function like an alert() or a prompt. After a user closes them, the tab will close either way.
beforeUnload is also extremely short-timed. You won't be able to run massive scripts with it, as the user would probably close the tap before any script would run properly. (I tried it with an ajax call, didn't work)
So, even if you're able to get the options you want in there, the moment a user chooses one of the options, you're not going to be able to save it anywhere. Your script will never make it that far.
You can customize the "are you sure?" message like so:
$(document).ready(function() {
window.onbeforeunload = function(e) {
return 'Dialog text here.';
};
});
but again, you can only change the text. It's a browser's native functionality, and you cannot change it.
When a Page unload, i want a confirm box and it is possible with following code
$(window).on('beforeunload', function (event) {
return "Chandan From Mandya";
});
But instead of confirmation box i want to show customized dialog box.
I have read so many blogs, all are saying that we can't override.
But in facebook they are doing it. When in fb status we write something, and without posting, if we try to leave the page. they are show customized dialog box.
How that is possible ???
In jQuery, this is done with unload event.
The unload event is sent to the window element when the user navigates away from the page. This could mean one of many things. The user could have clicked on a link to leave the page, or typed in a new URL in the address bar. The forward and back buttons will trigger the event. Closing the browser window will cause the event to be triggered. Even a page reload will first create an unload event.
You can use it like this:
$( window ).unload(function() {
//Handling the event
});
The link to jQuery page is: http://api.jquery.com/unload/
As for the custom dialog box, try some of these:
http://bootboxjs.com/
http://www.queness.com/post/1696/create-a-beautiful-looking-custom-dialog-box-with-jquery-and-css3
There are a lot of custom dialogbox solutions out there, just google it.
If a user clicks the browser's back button, then I want a prompt to appear and ask for confirmation. If the user clicks 'OK', then it should navigate to xx.html. If the user clicks 'Cancel', then it should prevent the navigation. How can I do this?
Note: Already I tried the onbeforeunload method, but it is working for all the navigation actions. For Example, clicking the link on the page will also fire this event and show the message to the user.
You can't. The best you can do is use onbeforeunload and remove that event when clicking on a normal link:
<script type="text/javascript">
window.onbeforeunload = function() {return "Are you sure?"}
</script>
Leave
There's no way to differentiate between navigational actions in the onbeforeunload event. You could disable it for all links/forms on the page by removing the window.onbeforeunload handler in each link's onclick handler, or onsubmit for forms. However, you will still be unable to tell whether the user clicked back, forward, a bookmark, etc or typed a new address into the address bar.
Firstly, you need to capture the "beforeunload" event (which previous answers here did).
// Display browser warning message when back/forward/reload or hyperlink navigation occurs
$(window).on('beforeunload', function(e) {
console.log('page navigation captured');
return 'By leaving this page you will lose the data you have entered here.';
});
More importantly, you want to allow non-disrupted navigation from certain elements (e.g. links with class "allow-navigation"). The way to achieve is to remove the event-handler when your links of choice are clicked.
// Disable capture for certain elements
$('.allow-navigation').on('click', function(e) {
$(window).off('beforeunload');
console.log('page navigation allowed');
});
Will work for your links of the type:
Click me
This way you can control the page navigation. Browser back/forward/etc still open the confirmation box. But the links you choose will work without any disruption.
Hope this helps.
you can do this
$(window).bind("beforeunload", function() {
return "Are you Sure you want to leave this page?"; // Return whatever message you want
});
also if xx.html is the page in their history than you dont need to add
anything just return a message it will automatically put buttons for
you
Edit: see fiddle before you assume it does not answer the question
asked http://jsfiddle.net/Lxq93/
Edit: there is no definitive way to display a message only on the back
button in my knowledge i have also looked and have seen the only
methods that pick up on the back button are
$(window).bind("beforeunload",function(){return;}) and
$(window).onbeforeunload = function(){return;} and they both pick up
on when the page is refreshed or any other navigation away from the
current page. This is currently the best answer that can be provided
in the year 2014
Edit:
above is for all unload events
http://jsfiddle.net/Lhw2x/85/
been messing with that through all its lower objects it cant be done through javascript till someone decides to make all major browsers use a specific name for each unload event instead of it just being an unload event
so the answer is no you cannot force a navigation to a specific page when they click okay on the confirmation when they try to go to a different page
and back button does not have a specific event name it shares its event with several different events all in the unload event so you cannot make a back button specific function through javascript
What options do I have preventing the user from just closing the browser or navigating to another site? (of course I can't prevent him pulling the plug on the computer, etc.: I just want to show him a warning)
You could use the JS beforeunload event in order to achieve this.
You should use the onunload event.
<script>
function onExitHandler() {
// called when user about to leave the page
}
</script>
<body onunload="onExitHandler()">
...
</body>
You can see an example here: http://www.w3schools.com/jsref/jsref_onunload.asp