Temporary page redirect for external links

Question

I'm not sure what exactly to call this so I will try to explain it to the best of my abilities.

User> Connects to my website> Proceeds to look around clicking through the navigation menus ...etc. > Finds a link to an external website and clicks it.

I would like for their to be a small 5-10 second buffer on which he is temporarily redirected to something like mywebsite.com/goodbye.html

I'm not sure how to get my website to grab the url he clicked on and still redirect him to original link after the 5-10 second redirect buffer has ended. I also am not sure how to allow this to work on my entire site.

//////////////////////////////////////////////////////////////////////////////// All of these text based outgoing urls from mywebsite.com.

User clicks bob.com > 5 seconds redirect to mywebsite.com/goodbye.html > bob.com

User clicks david.com > 5 seconds redirect to mywebsite.com/goodbye.html > david.com

User clicks google.com > 5 seconds redirect to mywebsite.com/goodbye.html > google.com

User clicks stackoverflow.com > 5 seconds redirect to mywebsite.com/goodbye.html > stackoverflow.com

GolezTrol · Accepted Answer · 2015-12-05T11:24:52.680

Your question is quite broad, but here is a very simple setup.

The script tries to capture the clicks on every 'a' element. It checks their href attribute. If that starts with http, the special behaviour kicks in, otherwise just performs the normal behaviour.

The special behaviour consists of showing some content and navigating away after 5 seconds.

The advantage of this structure is that it works quite transparently. If you don't have Javascript enabled (think web crawlers), the clicks will work as normal, without the extra content and the delay inbetween.

// Capture all link clicks.
$('a').on('click', function(event) {
  
  // Get the element and its href attribute.
  var $element = $(event.target);
  var link = $element.attr('href');
  
  if (link.substr(0, 4) == 'http') {
    // If the link starts with http, assume external link.
    // In that case, block normal behaviour, insert custom content and navigate after 5 seconds.
    event.preventDefault();

    $element.html("Leaving this website in 5...");

    setTimeout(function() {
      console.log("This is when the redirect would take place, if not in Staack Snippets");
      document.location.href = link;
    }, 5000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="/404.html">Go to internal link</a>
<br><br>
<a href="http://www.google.com">Go to google</a>

Now, the example is not complete. I just changed the text of the link, while in your situation, you may want to load some goodbye page using AJAX and show it in an overlay.

Also note that the example does not fully work as a stack snippet, because apparently it tries to load the new page (Google) trough Ajax, which fails. That aside, the code of the logic works fine.

Alternative

As an alternative, you could actually redirect to the goodbye page, and post the target url with it. After a couple of seconds that page can redirect to the target page. That redirection can simply be done by inserting a <meta refresh> tag into the goodbye page. That page has to be a dynamic page for that:

<meta http-equiv="refresh" content="5; url=http://google.com/">

score 0 · Answer 2 · edited May 23 '17 at 12:09

Change all your external links to mywebsite.com/goodbye.html and add the the target page in the querystring. Something like this mywebsite.com/goodbye.html?redirect=david.com Then add the follwoing Javascript at your goodbye page

setTimeout(function(){  
  var redirectTo = getParameterByName('redirect')
  window.location.href = redirectTo
  //OR window.location.replace(redirectTo)
}, 5000);

// From https://stackoverflow.com/a/901144/3218330 
function getParameterByName(name) {
  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
  results = regex.exec(location.search);
  return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

getParameterByName() is from https://stackoverflow.com/a/901144/3218330

Temporary page redirect for external links

2 Answers2