jquery - 使用jQuery单击链接时如何重定向到带有消息的外部URL

Question

我在页面上有一些链接，需要让用户知道他们在单击链接时被重定向到外部源。如何拦截或显示一条消息“您正在被重定向到外部源”，该消息会停留 5 秒，然后将用户重定向到单击链接中的 URL？

Answer 1

阻止默认操作，弹出确认或带有 setTimeout 的对话框，并以编程方式重定向：

$('a.external').on('click', function(e) {
    return ( confirm('you are being redirected to ' + this.href) );
});

请注意，这被认为是糟糕的用户体验，尤其是等待五秒钟重定向会使大多数用户离开？

Answer 2

上面的答案应该显示一个确认对话框，如果你想在所述时间之后重定向你会想要做这样的事情：

$('a.external').on('click', function(e) {
    e.preventDefault();
    $('.PopUpMessage').show();

    var redirect = setTimeout(function(){
        window.location.href = this.href;
    }, 5000);
});

其中“.PopUpMessage”包含您的消息并且默认隐藏...

如果你想变得花哨，你甚至可以倒数秒......比如

此 HTML 将在您的消息中

<p>You will be redirected in<span id="sec">5</span></p>

并将这个 JS 放在链接点击函数中

var seconds = 5;
var count = setInterval (function(){
    seconds--;
    $('#sec').html(seconds);
}, 1000);

Answer 3

$(function(){
  $("a").on("click",function(e) { // or use a class selector
    if (this.hostname!=location.hostname) {
      var URL = this.href;
      $("#redirectMessage").fadeIn("slow");
      setTimeout(function() { location.href =URL;},5000);
      e.preventDefault(); // stop link
    }
  });

});