指定时间后 JQuery 重定向到 URL

Posted 2023-02-22

【中文标题】指定时间后 JQuery 重定向到 URL

【英文标题】：JQuery Redirect to URL after specified time

【发布时间】：2011-11-08 18:04:21

【问题描述】：

有没有办法在给定时间段后使用 JQuery 重定向到特定 URL？

【问题讨论】：

你应该接受正确的答案...

如果你想要跨浏览器和 seo 支持：redirect generator

【参考方案1】：

将 setTimeout 函数与以下任一一起使用

// simulates similar behavior as an HTTP redirect
window.location.replace("http://www.google.com");

// simulates similar behavior as clicking on a link
window.location.href = "http://www.google.com";

setTimeout(function()
   window.location.replace("http://www.google.com");
, 1000) 

来源： https://www.sitepoint.com/jquery-redirect-web-page/

【讨论】：

这如何解决问题的第二部分（...经过一段时间）？

使用 setTimeout 函数更新答案

【参考方案2】：

这是改进的@Vicky 解决方案 - 它添加了 clearInterval() ，因此如果重定向时间过长，它可以防止重新加载循环：

                            $(document).ready(function () 
                                var myTimer = window.setInterval(function () 
                                    var timeLeft = $("#countdown").html();
                                    if (eval(timeLeft) == 0) 
                                        console.log('Now redirecting');
                                        clearInterval(myTimer);
                                        window.location = ("@Html.Raw(HttpUtility.HtmlDecode(redirectUrl))");
                                     else 
                                        $("#countdown").html(eval(timeLeft) - eval(1));
                                    
                                , 1000);
                            );

【参考方案3】：

$(document).ready(function() 
    window.setInterval(function() 
    var timeLeft    = $("#timeLeft").html();
        if(eval(timeLeft) == 0) 
                window.location= ("http://www.technicalkeeda.com");
         else 
            $("#timeLeft").html(eval(timeLeft)- eval(1));
        
    , 1000);
);

【讨论】：

我不鼓励使用eval()，因为它有许多危险的后果。相反，我建议使用parseInt()。

唯一的问题是，如果重定向没有很快发生，它会一直重定向并且永远不会到达目标页面

【参考方案4】：

我做了一个简单的演示，提示输入 X 秒数并重定向到设置 url。如果您不想等到计数结束，只需单击计数器即可立即重定向。 简单的计数器，在页面中间脉冲时间时会倒计时。 您可以在单击或加载某些页面时运行它。

LIVE DEMO ONLOAD

LIVE DEMO ONCLICK

我还为此制作了 github repo： https://github.com/GlupiJas/redirect-counter-plugin

JS 代码示例：

// FUNCTION CODE
function gjCountAndRedirect(secounds, url)


        $('#gj-counter-num').text(secounds);

        $('#gj-counter-box').show();

    var interval = setInterval(function()
    

        secounds = secounds - 1;

        $('#gj-counter-num').text(secounds);

        if(secounds == 0)
        

            clearInterval(interval);
            window.location = url;
            $('#gj-counter-box').hide();

        

    , 1000);

    $('#gj-counter-box').click(function() //comment it out -if you dont want to allo count skipping
    
        clearInterval(interval);
        window.location = url;

    );


// USE EXAMPLE
$(document).ready(function() 
    //var
    var gjCountAndRedirectStatus = false; //prevent from seting multiple Interval

    //call
    $('h1').click(function()
        if(gjCountAndRedirectStatus == false)
        
            gjCountAndRedirect(10, document.URL);
            gjCountAndRedirectStatus = true;
        
    );

);

【参考方案5】：

是的，解决方法是使用setTimeout，像这样：

var delay = 10000;
var url = "https://***.com";
var timeoutID = setTimeout(function() 
    window.location.href = url;
, delay);

请注意，结果存储在timeoutID 中。如果您出于某种原因需要取消订单，您只需致电

clearTimeout(timeoutID);

【参考方案6】：

您可以使用setTimeout() 函数：

// Your delay in milliseconds
var delay = 1000; 
setTimeout(function() window.location = URL; , delay);

【参考方案7】：

你可以使用

    $(document).ready(function()
      setTimeout(function() 
       window.location.href = "http://test.example.com/;"
      , 5000);
    );

【参考方案8】：

只需使用：

setTimeout("window.location.href='yoururl';",4000);

.. '4000' 是 m.second

【参考方案9】：

您实际上并不需要 jQuery。您可以使用 setTimeout 方法使用纯 javascript 来完成此操作：

// redirect to google after 5 seconds
window.setTimeout(function() 
    window.location.href = 'http://www.google.com';
, 5000);