Develop Reference

Check if user is leaving the page js

I tried onbeforeunload event but it's not working when leaving the page it's only working when I reload but every thing works fine on edge.
I think Chrome have changed somethings in configuration.
Is there a way to fix that or another method?
onbeforeunload = function(){
return("bye");
}
AND is there a way I can check if user is closing the page or redirecting to another url with out firing on reloading or can I not do that?

Even when using JQuery, a framework with the objective cross browser compatibility, they say:
The exact handling of the unload event has varied from version to version of browsers. For example, some versions of Firefox trigger the event when a link is followed, but not when the window is closed. In practical usage, behavior should be tested on all supported browsers and contrasted with the similar beforeunload event.
Source
So you have to accept an inconsistent behaviour.

You could try doing this:
window.onbeforeunload = function(e) {
return "Bye";
}
As you need to attach the event to the window

Detecting all possible cases of page refresh

I read these two questions:
How can I detect browser tab refresh or close using javascript
and
How do I detect a page refresh using jquery?
which suggest binding to 'onbeforeunload' and also binding on F5 and Ctrl-R key presses, which is good advice.
However, most browsers have a refresh button on their address bars, like this in Chrome:
Question is: is it possible to detect and bind to refresh event of browser's address bar's refresh button?

By binding onbeforeunload to windowlike this window.onbeforeunload it should trigger in most browsers. check this fiddle. It seems it's not supported on IOS devices.
For IOS apple docs suggest using pagehide see apple page on Handling Events.
The load and unload events may not work as expected for back and forward optimization. Use the pageshow and pagehide events instead.
Keep in mind that this will also trigger on all other kinds of navigation away from the page. Such as close, tab close, back/ forward navigation, link navigation and address bar navigation
Checking if the browser is reloading versus navigating away from the page I'm pretty confident is not possible, due to security/ privacy reasons not being able to give you the destination url. You could eliminate link presses by using it is an condition when firing the onbeforeunload.
Edit: If you need to check if the page has been reloaded however, you could use sessionvariables or cookies to store that the user has already opened the page once before.

Detects a click outside document

I am having a problem to detect a click event outside document, for instance in the closing button of the browser without using the onbeforeunload event, because I have a JSP page that is processing something, using meta refresh to give the status of the process evolution.
Since I am using meta refresh I cannot use window.onbeforeunload event to prevent/confirm the user to exit because the meta refresh will fire up the event. Thus, I need to check manually if the mouse will be clicked outside my document.
I can check if the mouse coordinates are outside, thus can´t associate an click event to that in IE8.
if (window.event.clientY < 82 && window.onclick)
Someone have any idea out achieve this issue?
Thanks in advance!

Detecting the close button isn't possible but you can detect if the user is losing focus of the browser by doing:
$(window).blur(function() {
alert('lost focus');
}

It's not possible. Events don't fire outside of the document, including clicks on the window chrome.

I think you will need to think about what you're trying to achieve. It sounds like a shaky design if you must get the close event of the page. Lots of other events will affect you if that is of a concern.
If you have a JSP page producing and showing the status by a meta refresh - what is your problem with the window closing? That should be of your concern, not how to detect a browser close event.

Handle chrome link clicked event

I'm writing a chrome history extension, and I was wondering if there's a way to detect when the user clicks a link.

Instead of injecting listeners to every single link via Content-Script, can you utilize: chrome.tabs.onUpdated event? There are many events as well.
But since you stated history, you can use the onVisited event, which fires when a URL is visited.
It would be better to utilize the extension framework instead of relying on content scripts all the time which might become messy.

window.unbeforeunload show div IE7 problem

Currently I am developing a web application for which I am using a pre-loader icon. What I want is that the pre-loader becomes visible every time the user navigates to another page or refreshes the page. So far I have the following solution:
window.onbeforeunload = function() { $("applicationdisabler").show(); };
For Safari and Firefox it works fine when the user clicks a link or refreshes the page. However in IE7 the div only becomes visible when the user clicks a link and NOT when the user refreshes the page.
The user can refresh the page by hitting F5 (on Windows) or any other possible way the browser provided.
Of course I have been looking for some workarounds already. The following code shows the alert in IE7, but the div still doesn't become visible.
window.onbeforeunload = function() { $("applicationdisabler").show(); alert("come on!"); };
The code of my div:
<div id="applicationdisabler"><img src="images/preloader.gif" /></div>
Hopefully someone can help me out.

You need to put the # before the id on the jQuery selector:
$("#applicationdisabler").show();

Why not use just use the onLoad listener instead? Although it would be slightly slower it should be more reliable.
Actually after a bit of looking around I'm not sure modifying the DOM makes any sense unless the onBeforeUnload handler returns false first - i.e. forces the user to stay on the same page.
As I understand it the onBeforeUnload event is fired just before the page is unloaded, so if you don't return false the browser will unload the page and DOM, and any JavaScript executed after that will be pointless.
That doesn't quite explain why JavaScript isn't executed properly in the onBeforeUnload function, but from what I've seen sites only use the window.alert or window.prompt dialogs to ask the user if they want to leave the site, and then often executing JavaScript if the user decides to stay.
Hence I'm guessing that some browsers may not allow DOM manipulation when this event is fired - since if the page is unloaded any DOM manipulation done is completely pointless.
So either:
Return false in your onBeforeUnload method, and then show your preloader (although this will stop navigation to the next page)
Use the onLoad event of the next page to show the preloader image instead
Also note: Opera versions 9.5 and below do not support this event (I'm unsure about later versions) but GMail does manage to catch the back button in Opera.
Possibly related is this security warning for IE7's implementation of the onBeforeUnload event - it's possible Microsoft patched it in a way that prevents the things you're trying to do. And I know IE6 and below don't allow commands like document.location='' in the onBeforeUnload handler for security reasons.