javascript - 打开外部链接时显示超时警告

Question

我希望当用户点击我网站上的任何外部链接(由特定 ID 或类标识)时，他应该得到一个计数器为 10 秒的弹出窗口，10 秒后弹出窗口应该关闭，用户应该能够访问外部 URL。如何才能做到这一点？我能够显示如下所示的警告，但我不知道如何为其添加超时，这也是一个 confirm 框，而不是一个弹出窗口，我可以在其中添加一些 div 以及更多内容供用户查看，直到计数器停止。

$(document).ready(function(){

var root = new RegExp(location.host);

$('a').each(function(){

    if(root.test($(this).attr('href'))){ 
        $(this).addClass('local');
    }
    else{
        // a link that does not contain the current host
        var url = $(this).attr('href');
        if(url.length > 1)
        {
            $(this).addClass('external');
        }
    }
});

$('a.external').live('click', function(e){

    e.preventDefault();
    var answer = confirm("You are about to leave the website and view the content of an external website. We cannot be held responsible for the content of external websites.");

    if (answer){
        window.location = $(this).attr('href');
    } 

});

});

PS:有没有免费的插件？

Answer 1

我整理了一个小演示来帮助您。首先要注意的是您需要使用 setTimeout JavaScript 中的函数。其次，确认框和警告窗口不会为您提供所需的灵 active 。所以这是我的 HTML，首先我显示了一个简单的链接，然后创建了一个从用户 View 中隐藏的弹出式 div。

<a href='http://www.google.com'>Google</a>

<div id='popUp' style='display:none; border:1px solid black;'>
    <span>You will be redirected in</span>
    <span class='counter'>10</span>
    <span>Seconds</span>
    <button class='cancel'>Cancel</button>
</div>

接下来，我创建了一个对象来控制弹出窗口的显示方式，并在弹出窗口中处理相关事件。这样做主要是为了将我的弹出代码放在一个地方，并将所有事件集中在对象内。

$('a').live('click', function(e){

    e.preventDefault();
    popUp.start(this);    
});

$('.cancel').click(function()
                   {
                       popUp.cancel();
                   });

var popUp = (function()
{
    var count = 10; //number of seconds to pause
    var cancelled = false;

    var start = function(caller)
    {
         $('#popUp').show();
        timer(caller);
    };
    var timer = function(caller)
    {
        if(cancelled != true)
        {
            if(count == 0)
            {
                finished(caller);
            }
            else
            {
               count--;
                $('.counter').html(count);
               setTimeout(function()
                          {
                              timer(caller);
                          }, 1000);
            }
        }
    };  
    var cancel = function()
    {
        cancelled = true;
        $('#popUp').hide();
    }
   var finished = function(caller)
     {
        alert('Open window to ' + caller.href); 
     };

    return {
        start : start,
        cancel: cancel
    };
}());

如果您运行，您将看到显示弹出窗口并且倒计时正在正确倒计时。当然，它仍然需要进行一些调整，但您应该能够看到正在完成的工作的总体思路。希望对您有所帮助!

JS fiddle 示例:http://jsfiddle.net/u39cV/