I've searched for hours, but I couldn't find a solution for this.
window.onbeforeunload = warn;
This doesn't work:
function warn (e)
{
var destination = e.href;
alert(destination );
}
Okay, so to clear the things. If the user clicks on a link on the page itself, it is easy, because you can add an eventhandler to all of the links onclick event, but. I want to catch the address, what the user types into the url box of the browser.
Because it can't be done. The new location is private/sensitive information.
Nobody wants you to know which sites they visit when they leave your site.
If you just want to see what link destination, you can use :
document.activeElement.href
But getting the address line destination is not possible.
I've heard of solutions where they fire off an event if the mouse moves up to the address line (to warn the user that there are unfinished processes that have not been dealt with), but this sort of hack I would never do.
Kaze's answer is an interesting approach, but looking at the element focus when the page is navigated away from isn't really reliable. Partly because there is a delay between the link click and the navigation away from the page (during which time the user may move focus to some other element, but also because a link may be focused (eg. by keyboard control, or mousedown-without-click) without actually being used to navigate away from the page. So if you focused a link then closed the window, it'd think you were following the link.
Trapping onclick for every link on the page (plus onsubmit on every form) is slightly more reliable, but can still be fooled due to the delay. For example you click a link, but then before the new page starts loading hit the back button (or press Escape). Again, if you close the window it thinks you're following the link.
I want to catch the address, what the user types into the url box of the browser.
There is no way that will ever happen. It is an obvious privacy no-no.
Related
I've searched for hours, but I couldn't find a solution for this.
window.onbeforeunload = warn;
This doesn't work:
function warn (e)
{
var destination = e.href;
alert(destination );
}
Okay, so to clear the things. If the user clicks on a link on the page itself, it is easy, because you can add an eventhandler to all of the links onclick event, but. I want to catch the address, what the user types into the url box of the browser.
Because it can't be done. The new location is private/sensitive information.
Nobody wants you to know which sites they visit when they leave your site.
If you just want to see what link destination, you can use :
document.activeElement.href
But getting the address line destination is not possible.
I've heard of solutions where they fire off an event if the mouse moves up to the address line (to warn the user that there are unfinished processes that have not been dealt with), but this sort of hack I would never do.
Kaze's answer is an interesting approach, but looking at the element focus when the page is navigated away from isn't really reliable. Partly because there is a delay between the link click and the navigation away from the page (during which time the user may move focus to some other element, but also because a link may be focused (eg. by keyboard control, or mousedown-without-click) without actually being used to navigate away from the page. So if you focused a link then closed the window, it'd think you were following the link.
Trapping onclick for every link on the page (plus onsubmit on every form) is slightly more reliable, but can still be fooled due to the delay. For example you click a link, but then before the new page starts loading hit the back button (or press Escape). Again, if you close the window it thinks you're following the link.
I want to catch the address, what the user types into the url box of the browser.
There is no way that will ever happen. It is an obvious privacy no-no.
Using Javascript is it possible to hook a custom function to the browser back button while preventing the default event?
So simply put, the user clicks the browser back button, and instead of being taken back to the previous page on my site, my function fires. My aim is not to to prevent the user leaving my site.
Something like the below pseudo code:
window.backbutton.click(function(e){ preventDefault(e); myFunc(); })
FYI What I actually have is an internal back/forward system controlled by buttons within the view and I'd like to trigger my buttons when user clicks browser back.
You should look into Browser History https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history . It is a new standard for emulating pages (back and forward) on a single-page site.
you can do this
$(window).bind("beforeunload", function() {
return "Are you Sure you want to do this even though there are internal navigation buttons? if you do whatever you have done so far
will be gone unless it has been completed and/or submitted "; //
Return whatever message you want
});
Edit: this method displays a confirmation with the message and
automatically places buttons in the confirmation window
the author also clearly stated he does not want to prevent users from
leaving his site
see js fiddle http://jsfiddle.net/JW9fX/
Aaron - "updated question, I do not want to prevent them leaving my
site – Aaron 27 mins ago"
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 hook a custom function to the browser back button while preventing the default event using javascript
My following code isn't working to redirect the user to another page:
$(window).on('beforeunload',function(){
window.location.href="http://www.google.com;
}) ;
I want the user to be redirected to another page when he attempts to close the tab.
What's the alternative and appropriate way to achieve this?
*Don't do it*
But it is possible with the user's permission; you can achieve something like this (took me a while to find a website that was happy in a frame)
window.onbeforeunload = function () {
window.setTimeout(function () { // escape function context
window.location = 'http://bbc.co.uk';
}, 0);
window.onbeforeunload = null; // necessary to prevent infinite loop
// that kills your browser
return 'Press "Stay On Page" to go to BBC website!';
// pressing leave will still leave, but the GET may be fired first anyway
}
Demo
I don't think this is possible.
There are some things you can can do in this event but that is severely limited due to spammers back in the day. They used to have animated text in the window statusbar which would obscure link href's so you would be clicking blind and open tons of windows when you tried to leave so that you were essentially trapped on the site.
This got to be such a problem that as far as I recall it was one of the "features" that Firefox bragged about solving when it first launched.
It was toned down to being able to beg them to stay with a dialog box but then that was abused as people worded it like official system messages and tricked people.
Now most browsers let you request a "stay on page / leave page" dialog but dont give you any control over the wording.
Here are some docs that list your options:
https://developer.mozilla.org/en-US/docs/Web/API/window.onbeforeunload
i want to know is there any way we can know browser's events.. like : clicking on BACK button, FORWARD button, REFRESH button by javascript.
These specific browser events are not available as it would be vulnerable to severe privacy violations. Privacy is something browser vendors hold sacred and a key selling (proverbial) point. All browsers allow you to know is when a user enters or leaves your page for which Kamui pointed out the technical details.
Within the same site, it's possible to achieve some browser event tracking using cookies and javascript. For example track wether users click on a hyperlink and label it as a forward event and when a user leaves the page without clicking on a hyperlink it could be one of:
browser url input
back action
javascript location.href replace
The location.href replace can be tracked as well when you have full control over all javascript, just use a helper method with tracking code instead of directly chaning location.href.
That leaves browser url input and the back action. With cookies and request headers (getting the referrer) it is possible to get close to finding out the forward and back events, though not 100%, but pragmatically, 99% sure is good enough.
Figuring out the refresh event is easy with request headers (referrer), if the current url matches the referrrer, it's a refresh event.
Now I offer no code or definite solution, but I outlined what you could do to track back, forward and refresh events within a single domain context. It won't be a quick and easy way to implement it and as far as I know, there's no framework in existance that reliably tracks browser events or even comes close to what I described above.
A more common/lazy technique to achieve something similar is to create a single page app, for which there are many frameworks available. Just google single page app framework, but thats a pretty heavy solution with other implications that I won't go into now.
You can not capture (for example run some piece of code when user presses Back button) them, however, you can direct your pages in history by using:
history.go
history.back
history.forward
More about JS History object.
As #sarfraz says you cannot capture the back and forward button clicks but you could call
window.onbeforeunload = function(){alert("you just tried to leave the page");};
which should be triggered when either the back/forward/refresh buttons are clicked to perform an action, unfortunately you can't tell if they are going back or forward. Please note don't alert a message it's really annoying when trying to exit a page.
EDIT
you can also do this in jQuery if you have it
$(window).unload( function () { alert("Bye now!"); } );
I've searched for hours, but I couldn't find a solution for this.
window.onbeforeunload = warn;
This doesn't work:
function warn (e)
{
var destination = e.href;
alert(destination );
}
Okay, so to clear the things. If the user clicks on a link on the page itself, it is easy, because you can add an eventhandler to all of the links onclick event, but. I want to catch the address, what the user types into the url box of the browser.
Because it can't be done. The new location is private/sensitive information.
Nobody wants you to know which sites they visit when they leave your site.
If you just want to see what link destination, you can use :
document.activeElement.href
But getting the address line destination is not possible.
I've heard of solutions where they fire off an event if the mouse moves up to the address line (to warn the user that there are unfinished processes that have not been dealt with), but this sort of hack I would never do.
Kaze's answer is an interesting approach, but looking at the element focus when the page is navigated away from isn't really reliable. Partly because there is a delay between the link click and the navigation away from the page (during which time the user may move focus to some other element, but also because a link may be focused (eg. by keyboard control, or mousedown-without-click) without actually being used to navigate away from the page. So if you focused a link then closed the window, it'd think you were following the link.
Trapping onclick for every link on the page (plus onsubmit on every form) is slightly more reliable, but can still be fooled due to the delay. For example you click a link, but then before the new page starts loading hit the back button (or press Escape). Again, if you close the window it thinks you're following the link.
I want to catch the address, what the user types into the url box of the browser.
There is no way that will ever happen. It is an obvious privacy no-no.