We Keep Coding

Pop-up when leaving website

I've been asked to have a pop-up when visitors leave the site asking them if they really want to leave. This pop-up will only show if their shopping cart has items in it.
I can easily limit the pop-up to when the cart has items, however the issue I'm having is that even clicking an internal link loads the pop-up - how can I have it so this only comes up when actually leaving the site.
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "some message about leaving";
}
</script>

If a link is clicked, it will tell you in e.target.activeElement. You can check if it's a link there:
window.onbeforeunload = confirmExit;
function confirmExit(e)
{
var $element = $(e.target.activeElement);
if ($element.prop("tagName") !== "A") {
return "some message about leaving";
}
}
Note: You can add additional conditions checking $element.attr("href") to make sure it displays the message for links that aren't your site.

Alright first of all: Don't do this. Please. It's super-annoying for users. Just make sure the shopping cart items are stored on the server or in a cookie so users can always go back to the site.
Looking at this related question: How can i get the destination url in javascript onbeforeunload event? it can't be done easily.
Instead of using onbeforeunload, either attach a click handler to external links on your site that shows the popup, or attach a click handler to all links that checks if the link is external or not.
Again, don't do this...

You could get the URL of a clicked link item, and check if it's on the same domain. Put this in an if not statement, with the current code inside.

you'll have to control it to enable and disable the behavior, something like this:
<script>
var beforeunload = function (event) {
var message = 'some message about leaving';
(event || window.event).returnValue = message; // Gecko + IE
return message; // Webkit, Safari, Chrome...
};
document.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
window.removeEventListener('beforeunload', beforeunload);
}
});
window.addEventListener('beforeunload', beforeunload);
</script>
this is going to remove the beforeunload event whenever a link is clicked on the page.

One way, and again, I wouldn't recommend doing this either - the user should be able to leave your site without receiving a warning - but you could unregister the event if a link has been clicked:
$('a').click(function() {
window.onbeforeunload = null;
return true; // continue
});

How to disable browser feature

I am developing a project where user gets a conformation page. I want user not to click back or close tab or reload.
Now either I need to disable the browser features or get back button,tab close event, or reload event to java script so that I could take the needed steps to prevent my data to get lost.
I have used this:
window.onbeforeunload = function()
{
return "Try This";
};
But this get called even when I click a button that redirects the page.

If you just want to have the alert, understanding that the user is ultimately in control and can bypass your alert, then do what you're doing but use a flag that disables it when you're navigating and don't want the alert. E.g.:
var warnWhenLeaving = true;
window.onbeforeunload = function() {
if (warnWhenLeaving) {
return "your message here";
}
};
then in a click handler on the link/button/whatever that moves the user on that you don't want this to pop up on:
warnWhenLeaving = false;
In a comment you asked:
can i know that what user has clicked when alert is generated with this function. That is can i know what user has clicked (leave this page/stay on page)
The answer is: Sort of, but not really; you're almost certainly better off not trying to.
But: If you see your onbeforeunload function run, then you know the user is leaving the page and the browser is likely to show them your message. The browsers I'm familiar with handle the popup like an alert: All JavaScript code on the page is blocked while the popup is there. So if you schedule a callback via setTimeout, you won't get the callback if they leave and you will if they stay:
window.onbeforeunload = function() {
if (warnWhenLeaving) {
setTimeout(function() {
display("You stayed, yay!");
}, 0);
return "No, don't go!";
}
};
Live Example
So in theory, if you get the callback, they stayed; if you see an unload event, they left. (Note that there are very few things you can do in an unload event.)
I've tried that on current Chrome, current Firefox, IE8, and IE11: It works on all of those. Whether it will work in the next release of any of them is anybody's guess. Whether it works reliably on mobile browsers is something you'd have to test, and again could change.

How to control browser confirmation dialog on leaving page?

I know there are a lot of questions regarding this but nothing is answering me right. I want to show a confirmation dialog when user leaves the page. If the user press Cancel he will stay on page and if OK the changes that he has made will be rollback-ed by calling a method. I have done like this:
window.onbeforeunload = function () {
var r = confirm( "Do you want to leave?" );
if (r == true) {
//I will call my method
}
else {
return false;
}
};
The problem is that I am getting the browser default popup: "LeavePage / StayOnPage"
This page is asking you to confirm that you want to leave - data you
have entered may not be saved.
This message is shown in Firefox, in Chrome is a little different. I get this popup after I press OK on my first confirmation dialog.
Is there a way not to show this dialog? (the second one, that I did not create).
Or if there is any way to control this popup, does anyone know how to do that?
Thanks

Here's what I've done, modify to fit your needs:
// This default onbeforeunload event
window.onbeforeunload = function(){
return "Do you want to leave?"
}
// A jQuery event (I think), which is triggered after "onbeforeunload"
$(window).unload(function(){
//I will call my method
});
Note: it's tested to work in Google Chrome, IE8 and IE10.

This is simple. Just use
window.onbeforeunload = function(){
return '';
};
to prompt when the user reloads, and
window.close = function(){
return '';
};
to prompt when the user closes the page.
But the user have to click on the page once, or do anything on the page for the code to detect. You don't have to put anything the the return'';, because JavaScript interpreter would just ignore it.

window.onbeforeunload = function() {
if (data_needs_saving()) {
return "Do you really want to leave our brilliant application?";
} else {
return;
}
};

jQuery Exit Popup Redirect?

So I've been looking around for hours, testing multiple versions, testing some of my own theories and I just can't seem to get it working.
What I'm trying to do is use alert or confirm (or whatever works) so popup a dialog when a user tries to navigate away from a purchase form. I just want to ask them "Hey, instead of leaving, why not get a free consultation?" and redirect the user to the "Free Consultation" form.
This is what I have so far and I'm just not getting the right results.
$(window).bind('beforeunload', function(){
var pop = confirm('Are you sure you want to leave? Why not get a FREE consultation?');
if (pop) {
window.location.href('http://www.mydomain/free-consultation/');
} else {
// bye bye
}
});
$("form").submit(function() {
$(window).unbind("beforeunload");
});

This is showing confirm dialog to user, want to stay or leave page. Not exactly what you looking for but maybe it will be useful for start.
function setDirtyFlag() {
needToConfirm = true; //Call this function if some changes is made to the web page and requires an alert
// Of-course you could call this is Keypress event of a text box or so...
}
function releaseDirtyFlag() {
needToConfirm = false; //Call this function if dosent requires an alert.
//this could be called when save button is clicked
}
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm)
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
Script taken from http://forums.devarticles.com/showpost.php?p=156884&postcount=18

Instead of using the beforeunload and alert(), I decided to check whether or not the users mouse has left the document. See code below:
$(document).bind('mouseleave', function(event) {
// show an unobtrusive modal
});

Not sure whether it will help.
You need to stop the propagation before showing the Confirm / Alert.
Please refer http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/
Look at the last comment.

Try this:
window.onunload = redirurl;
function redirurl() {
alert('Check this Page');
window.location.href('http://www.google.com');
}

Display a warning when leaving the site, not just the page

This sounded like something almost impossible to do when it was presented to me. I know you can display a dialog box to confirm when leaving a web page. But is it possible to display a dialog box when leaving a site?
I haven't been able to find/create anything that can read the address bar and know that you're leaving the site.

First off define which events can actually take your user away from your site?
A click of a link inside your web site content
A submit of a form to an outside action
A javascript from a child window that changes window.location on its parent
User starting a search in the search bar (FF and IE)
User entering a search/address in the browser address bar.
User hitting a back button (or backspace) when it just came to your site
User hitting a forward button (or shift-backspace) when they were off the site before but came back by getting there via Back button functionality
User closes the browser window
So. what can you do about all these?
These are easy. Check your anchors and if they do point outside, add some functionality in the onclick event
Similar to 1. Add your functionality for the onsubmit event of the form posting back outside of your site.
-> 8. don't really have an applicable solution that could be controlled. You can abuse onbeforeunload event as much as you want, but you won't have much success of knowing what's going on. And there are certain limitations related to onbeforeunload as well, so your hands will be tied most of the time.
The real question?
Why would you want to control this event anyway except for bothering your users not to leave you. Begging doesn't give much justice in the web world anyway. And when some site would bother me with messages or even worse prevent me from leaving I wouldn't want to get back anymore. It smells of bad bad bad usability and gives a hint of adware site.
Rather try to keep your users interested by providing them with valuable content.

Your best bet is listening on the non-standard beforeunload event. This is supported by almost all browsers, expect of Opera which is known to adhere the W3C standards extremely strictly.
Kickoff example:
window.onbeforeunload = function() {
return "You're leaving the site.";
};
This message will show up in kind of a confirmation dialogue.
In your specific case you need to turn it off (just set to null) whenever a navigational link is clicked or an internal form is submitted. You can do that by listening on the click event of the desired links and the submit event of the desired forms. jQuery may be of great help here:
window.onbeforeunload = function() {
return "You're leaving the site.";
};
$(document).ready(function() {
$('a[rel!=ext]').click(function() { window.onbeforeunload = null; });
$('form').submit(function() { window.onbeforeunload = null; });
});
You only need to give all external links the defacto standard attribute rel="ext" to denote that those are external links.
Google

This may help
You need to check onclick event before attach initLocalLinkException();
Disclaimer: It's not tested.
HTML:
internal link
html anchor
external link
blank external link
<form action="test.html" method="post" >
<button type="submit">Post Button</button>
</form>
JavaScript:
$(document).ready(function () {
initLocalLinkException();
window.onbeforeunload = function () { confirmExit() };
$('form').submit(function () {
window.onbeforeunload = null;
});
});
function initLocalLinkException() {
$('a').click(function () {
if ($(this).attr('target') != '_blank') {
var link = $(this).attr('href');
if (link.substr(0, 4) == 'http') {
var LocalDomains = new Array('http://www.yourdomain.com',
'https://yourdomain.com',
'localhost', '127.0.0.1');
var matchCount = 0;
$.each(LocalDomains, function () {
if (this == link.substr(0, this.length)) {
matchCount++;
}
});
if (matchCount == '0') {
confirmExit();
} else {
window.onbeforeunload = null;
}
} else { window.onbeforeunload = null; }
}
});
}
function confirmExit() {
alert('Are you sure?'); // Do whatever u want.
}

Take a look at this thread.
One possible way to achieve this would be to use Javascript to examine all of the a tags on your page when it loads and check if they are linking to an external site. If so, you can add an onclick event to show a confirm/alert box or something more elegant. Of course, using jQuery will greatly simplify the Javascript you'll have to write, like in the above thread.

Using the expression from this question, you can do the following:
$.expr[':'].external = function(obj){
return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname);
};
$.expr[':'].internal = function(obj){
return obj.hostname == location.hostname;
};
$(function() {
var unloadMessage = function() {
return "Don't leave me!";
};
$('a:internal').click(function() {
window.onbeforeunload = null;
});
$('form').submit(function() {
window.onbeforeunload = null;
});
$('a:external').click(function() {
window.onbeforeunload = unloadMessage;
});
window.onbeforeunload = unloadMessage;
});

It's possible. Just try entering a question or answer to SO and then navigating away before submitting it. It doesn't matter whether you click on a link or type in the address bar, you get an "Are you sure?" alert. You might post over on SO Meta asking how they do this.

You can do that if you design your site as a one page web app.
It means, a single page is loaded, then other contents are loaded dynamically using ajax.
In that case the onbeforeunload is triggered when the user leave the page/site.