1

I'm trying to use a script to go back in history when coming from within the domain. Coming from another domain as for example google, they have to be redirect to the homepage. This is what I have at this moment:

$( document ).ready(function() {

$('.back-btn').on('click', function(event) {
  var re = /^https?:\/\/example.com\//;

  event.preventDefault();

  if (re.test(document.referrer)) {
    history.go(-1); // Only go back if the referrer is from your domain
  } else {
    window.location="example.com";
  }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)" class="back-btn">Click here for one level up</a>

Does someone see why it doesn't work?

Regards,

Erwin

msanford
  • 11,803
  • 11
  • 66
  • 93
erwin_m
  • 31
  • 3
  • I was very stupid, the path didn't reached the js-file :(. I thought after that mistake, that is was working, but it doesn't as it should. Coming from another page within my site, I'm getting directed to the homepage instead of history -1. – erwin_m Dec 02 '17 at 15:29

1 Answers1

3

location.hostName can get you the domain much more simply than a RegExp will.

But, document.referrer returns a string and you can more easily test to see if a particular domain is in that string with .indexOf(), which returns the index position of the passed in string or -1 if it wasn't found.

Also, don't use hyperlinks when you aren't going to use its native behavior. This makes it more difficult for people who rely on assistive technologies to comprehend your site and it creates more code for you to write. Just about any visible element can be clicked, so a div or a span are better choices here because they have no native click behavior that would need to be prevented.

And, do not use inline HTML event attributes (i.e. onclick, etc.) or embed JavaScript inside of an href . There are many reasons why you should not use this outdated way of setting up event handlers that just will not die.

$( document ).ready(function() {
  $('.back-btn').on('click', function(event) {
    console.log("You have clicked me!");
    if (document.referrer.indexOf(location.hostname) > -1 ) {
      history.go(-1); // Only go back if the referrer is from your domain
    } else {
      window.location = "http://example.com";
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="back-btn">Click here for one level up</div>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Hi RobbieMilejczak, thank you for your reply! I've changed the code as your code, but right now the text isn't a link, it isn't clickable. Any further tips? – erwin_m Nov 28 '17 at 21:12
  • @user2997202 The text **is** clickable, but you need to use this code in your application where there is a `document.referrer` and a matching `location.hostname`. The Stack Overflow code snippet environment prevents `window.location` changes for security reasons. – Scott Marcus Nov 28 '17 at 21:21
  • Hi Scott, thought that there was first an answer of someone called Bobbie ;). I'm using this code in a wordpress-site. I've edited the hostname, but there's nothing happening... – erwin_m Nov 28 '17 at 21:59
  • @erwin_m I don't know Wordpress well, but I believe you have to do something special to integrate custom JavaScript into the code. You can see by my edited answer that clicking on the `div` does invoke the click event handler (even if the redirect is disabled by Stack Overflow). – Scott Marcus Nov 28 '17 at 22:14
  • @ Scott Marcus, I did see the the event handler react indeed. In wordpress I've added the script external in the head, that's also in wordpress the right way to do. In the page itself, there's only the div, nothing special. Don't get it... – erwin_m Nov 28 '17 at 22:27
  • I'm not sure that putting the script reference in the `head` is the only thing you have to do in WordPress. I think there's more to it than that. – Scott Marcus Nov 28 '17 at 22:29
  • I was very stupid, the path didn't reached the js-file :(. I thought after that mistake, that is was working, but it doesn't as it should. Coming from another page within my site, I'm getting directed to the homepage instead of history -1. – erwin_m Dec 04 '17 at 08:06