外部链接的临时页面重定向

Question

我不知道到底该怎么称呼它，所以我会尽我所能解释它。

用户> 连接到我的网站> 继续浏览点击导航菜单...等。 > 找到一个指向外部网站的链接并点击它。

我希望他们成为一个 5-10 秒的小缓冲区，在此缓冲区上他被临时重定向到 mywebsite.com/goodbye.html 之类的内容

我不确定如何让我的网站获取他点击的 url，并在 5-10 秒的重定向缓冲区结束后仍将他重定向到原始链接。我也不确定如何让它在我的整个网站上运行。

/////////////////////////////////////// //////////////////////////// 所有这些来自 mywebsite.com 的基于文本的传出 url。

用户点击 bob.com > 5 秒重定向到 mywebsite.com/goodbye.html > bob.com

用户点击 david.com > 5 秒重定向到 mywebsite.com/goodbye.html > david.com

用户点击 google.com > 5 秒重定向到 mywebsite.com/goodbye.html > google.com

用户点击 stackoverflow.com > 5 秒重定向到 mywebsite.com/goodbye.html > stackoverflow.com

Answer 1

您的问题非常广泛，但这是一个非常简单的设置。

脚本会尝试捕获对每个“a”元素的点击。它检查他们的href 属性。如果以http 开头，则特殊行为开始生效，否则仅执行正常行为。

特殊行为包括显示一些内容并在 5 秒后导航离开。

这种结构的优点是它的工作非常透明。如果您没有启用 Javascript（想想网络爬虫），点击将正常工作，没有额外的内容和中间的延迟。

// 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>

现在，示例还没有完成。我只是更改了链接的文本，而在您的情况下，您可能希望使用 AJAX 加载一些再见页面并将其显示在叠加层中。

还请注意，该示例不能完全用作堆栈 sn-p，因为显然它试图通过 Ajax 加载新页面（Google），但失败了。除此之外，逻辑代码运行良好。

另类

作为替代方案，您实际上可以重定向到再见页面，并使用它发布目标网址。几秒钟后，该页面可以重定向到目标页面。只需将<meta refresh> 标记插入再见页面即可完成该重定向。该页面必须是动态页面：

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

Answer 2

将所有外部链接更改为 mywebsite.com/goodbye.html 并在查询字符串中添加目标页面。像这样 mywebsite.com/goodbye.html?redirect=david.com 然后在你的再见页面添加以下 Javascript

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() 来自https://stackoverflow.com/a/901144/3218330