Exclude specific URLs on a javascript popup warning message

Question

I’m using the following code on a banking website to warn users that they are leaving the website.

$('a').filter(function() {
            return this.hostname && this.hostname !== location.hostname;
          })
          .click(function () {
             return window.confirm('Warning message here...');
            }); 
});

Currently when you click on the online banking login you get the popup window. I need to be able to exclude specific URLs that are not part of the website’s domain name so I can exclude the online banking website, but I have no idea how to do it.

Any help is appreciated.

Ryan · Accepted Answer · 2014-09-05T15:42:01.207

2

$('body').on('click', 'a', function(e){
  if(this.hostname != 'mydomain.com' && this.hostname != 'www.mydomain.com'){
    if(!confirm('This is an external link. Are you sure you want to leave?')){
      e.preventDefault();
    }
  }
});

I've used event delegation here to make sure it captures all links (including injected links). You may want to add mutiple domain conditions if you have sub-domains for example (www.mydomain.com).

edited Sep 05 '14 at 15:42

answered Sep 04 '14 at 21:31

Ryan

3,726
3
26
38

So I would put the domain name of the website where mydomain.com is shown above? Can you give me an example of how I would add another domain to that javascript? Thanks. – Lonnie Sep 04 '14 at 21:39
@Lonnie That's correct, just replace it for your domain. I've updated the code to show multiple domains. – Ryan Sep 04 '14 at 21:41
I replaced the original script with this one and added the two domains, it’s not working. The popup doesn’t show on any external links at all. – Lonnie Sep 04 '14 at 21:58
@Lonnie Can you give me a link to the website it's on, so I can test it? – Ryan Sep 04 '14 at 21:59
Ok, I was missing the closing tag on the group of scripts. I got it to work, but no matter how I declare the main domain the pop-up would show for any link. All navigation links, etc. – Lonnie Sep 05 '14 at 15:21
@Lonnie Can you give me any more information? Are there any errors in your JavaScript console? – Ryan Sep 05 '14 at 15:24
@Lonnie, you've done it right, and it works perfectly for me. Navigation links don't make it show but the facebook one for example, does. – Ryan Sep 05 '14 at 15:33
Ok - is something wrong with Safari 7? I checked it in chrome and it is working correctly, but in Safari it shows on every link. They have specifically asked for the site to work with Safari. Arg! – Lonnie Sep 05 '14 at 15:37
@Lonnie, I've updated the code in my answer as IE doesn't support the `URL` constructor. Looks like safari doesn't either. – Ryan Sep 05 '14 at 15:43

score 0 · Answer 2 · answered Sep 05 '14 at 07:55

Here is a refinement of Ryan's answer that allows you to block specific paths on your own domain as well as external links.

It checks the host and path seperately - so you can block all links that are not from your own domain, and specific paths on your own domain.

If the user clicks on a blocked link, the "request_confirmation" function requests confirmation from the user before allowing navigation away from the current page.

I have broken the logic into multiple functions so you can modify it easily.

$('body').on('click', 'a', function(e){
  return (should_link_be_blocked($(this).attr('href')))? request_confirmation() : true;
});

function should_link_be_blocked(link){
  var url = new URL(link);

  return should_host_be_blocked(url.hostname) || should_path_be_blocked(url.pathname);
}

  function should_host_be_blocked(host){
    return !(host.match(/([a-z0-9]+\.)?example.com/));
  }

  function should_path_be_blocked(path){
    var not_allowed = ['/block_me.html', '/block_another.html'];
    var block = false;

    not_allowed.forEach(function(n_a){
      block = (path == n_a)? true : block;
    });

    return block;
  }

function request_confirmation(){
  return confirm('This is an external link. Are you sure you want to leave?');
}

Here is an ugly example of it working : http://codepen.io/anon/pen/Gjagi

Unfortunately the example only works for me in chrome, in safari the pop-up window does not work. I have to have it work on a mac in safari too. — Lonnie, Sep 05 '14 at 15:25

Exclude specific URLs on a javascript popup warning message

2 Answers2