stop redirecting page if it is redirecting by clicking on anchor

Question

I want to prevent page redirecting I know it can be achieve by this

window.onbeforeunload = function() {
        return "Dude, are you sure you want to leave? Think of the kittens!";
}

which was answered here Prevent any form of page refresh using jQuery/Javascript

But in my case I only want to prevent page when it is redirecting by clicking on any of the anchor tag.

Also event.preventDefault() will not work in my case while clicking on anchor tag because all anchors are not redirecting page so it should work fine.

I only want to stop redirecting page if it is redirecting by clicking on anchor. Any solution?

Set a flag when an anchor is clicked. Then check that flag in this handler — Ian, Jul 19 '13 at 15:21
You can look at the `.caller` See: http://stackoverflow.com/questions/1333498/determine-calling-function-in-javascript — Diodeus - James MacFarlane, Jul 19 '13 at 15:22

score 4 · Accepted Answer · answered Jul 19 '13 at 15:23

4

You can keep a flag which tells you whether or not the user clicked an a tag, then read that on your onbeforeunload script:

window.onbeforeunload = function () {
    if (_clickedAnchor) {
        _clickedAnchor = false;
        return "Dude, are you sure you want to leave? Think of the kittens!";
    }
}

_clickedAnchor = false;

jQuery(document).ready(function () {
    jQuery("a").click(function () {
        _clickedAnchor = true;
    });
});

answered Jul 19 '13 at 15:23

Joe Enos

39,478
11
80
136

Didn't even think of this. Awesome answer – Jnatalzia Jul 19 '13 at 15:23
What if a link is used to call JS? This flag would be set. – Diodeus - James MacFarlane Jul 19 '13 at 15:24
@Diodeus Maybe links that redirect instead of just do javascript can have a different class, then it's just a matter of changing the selector - like `jQuery("a.redirect-link")`. – Joe Enos Jul 19 '13 at 15:25
Or kind of a hacky way: `jQuery("a").click(function () { _clickedAnchor = true; setTimeout(function() {_clickedAnchor = false; },100);});` – Joe Enos Jul 19 '13 at 15:26
I would, personally, avoid JQuery for something this small/simple and perhaps do something more similar to suggested here: http://stackoverflow.com/a/12065766/624590 – DRobinson Jul 19 '13 at 15:29
2

@DRobinson If you already weren't using jQuery, you're probably right, but the question was tagged with it - if you're using jQuery, then I say just use it wherever you can. So much easier than dealing with browser-specific event quirks. – Joe Enos Jul 19 '13 at 15:30
Yes, I suppose so (re: JQuery) – DRobinson Jul 19 '13 at 15:30
1

@DRobinson Tabbing to a link and hitting enter still fires the `click` event. – Joe Enos Jul 19 '13 at 15:31
Eek yes, that it does! – DRobinson Jul 19 '13 at 15:33
1

Then, yeah, the only issue I see is as Diodeus explained. You can store the href in _clickedAnchor and check whether it's null, or starts with a "#", instead of true/false. Set it to null where you'd typically set it to false. Still not perfect because it could very well have an href w/ code that catches the click and returns false to keep it from redirecting. – DRobinson Jul 19 '13 at 15:38
@JoeEnos Thanks, Really very nice solution, it was beyond my thinking. – commit Jul 19 '13 at 15:42

score 0 · Answer 2 · answered Jul 19 '13 at 15:21

You can use onhashchange.

With jQuery:

$(window).on('hashchange', function() {
    alert('bye byee?');
});

Plain DOM JavaScript:

window.onhashchange = function() {
    alert('bye byee?');
};

Note: You will need to create a custom "hash-change" handler for older browser which don't support this event.

You can easly do this with setInterval and detect any changes in document.location.hash.

Failsafe onhashchange for older browsers:

var currentHash = document.location.hash;

window.prototype.onhashchange = function( callback ) {
    if(typeof(callback) == 'function') {
        setInterval(function() {
            if(document.location.hash !== currentHash) {
                callback();
            }
        }, 650); // more than a half-a-second delay
    }
}

And you can use it as an event in regular DOM convention.

I am using jquery 1.7 and IE 9 but it does not work, will try this callback — commit, Jul 19 '13 at 15:46

score 0 · Answer 3 · answered Jul 19 '13 at 15:22

So since you tagged jQuery I'll put my solution in terms of that. You can grab all the a tags and then check to make sure the anchor is a redirect, then use the e.preventDefault();

$('a').on('click',function(e){
    if ($(this).attr('href') != window.location.href)
    {
       e.preventDefault();
       //do stuff
    }
});

score 0 · Answer 4 · answered Jul 19 '13 at 15:29

0

The caller will be null if a link is clicked:

window.onbeforeunload = function() {
    alert(window.onbeforeunload.caller)    
}

answered Jul 19 '13 at 15:29

Diodeus - James MacFarlane

112,730
33
157
176

It returns null all the time even i refresh page from url – commit Jul 19 '13 at 15:53
But if you refresh it from a JS function, you should get the function name. – Diodeus - James MacFarlane Jul 19 '13 at 15:57

stop redirecting page if it is redirecting by clicking on anchor

4 Answers4