CODEWITHSUNDEEP
htmlhttp-redirect
codedude
codedude

Reputation: 6519

Redirect website after specified amount of time

What do I have to do to have a function on a website where it says it will redirect you to the site in 3 seconds or so?

Upvotes: 177

Views: 469107

Answers (8)

Hashim Aziz
Hashim Aziz

Reputation: 6052

This implements noam's counter solution into a string for better user experience and uses ForguesR's suggestions to make it more robust for slower connections:

const message = document.querySelector(".message"); 
message.innerText = "Redirecting you to the next page in ";
message.insertAdjacentHTML("beforeend", "<span id='counter'>3</span> seconds.");
setInterval(function () {
  var span = document.querySelector("#counter");
  var count = span.textContent * 1 - 1;
  span.textContent = count < 0 ? 0 : count;
  if (count === 0) {
    window.location.replace("/payment");
  }
 }, 1000);
<div class="message"></div>

Upvotes: 0

Ehsan
Ehsan

Reputation: 1961

The simplest way is using HTML META tag like this:

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

Wikipedia

Upvotes: 16

noamtm
noamtm

Reputation: 12953

Here's a complete (yet simple) example of redirecting after X seconds, while updating a counter div:

<html>
<body>
    <div id="counter">5</div>
    <script>
        setInterval(function() {
            var div = document.querySelector("#counter");
            var count = div.textContent * 1 - 1;
            div.textContent = count;
            if (count <= 0) {
                window.location.replace("https://example.com");
            }
        }, 1000);
    </script>
</body>
</html>

The initial content of the counter div is the number of seconds to wait.

Upvotes: 33

mbrevoort
mbrevoort

Reputation: 5165

If you want greater control you can use javascript rather than use the meta tag. This would allow you to have a visual of some kind, e.g. a countdown.

Here is a very basic approach using setTimeout()

<html>
    <body>
    <p>You will be redirected in 3 seconds</p>
    <script>
        var timer = setTimeout(function() {
            window.location='http://example.com'
        }, 3000);
    </script>
</body>
</html>

Upvotes: 73

Sunny S.M
Sunny S.M

Reputation: 5978

Use this simple javascript code to redirect page to another page using specific interval of time...

Please add this code into your web site page, which is you want to redirect :

<script type="text/javascript">
(function(){
   setTimeout(function(){
     window.location="http://brightwaay.com/";
   },3000); /* 1000 = 1 second*/
})();
</script>

Upvotes: 1

Saqib
Saqib

Reputation: 2273

Place the following HTML redirect code between the and tags of your HTML code.

<meta HTTP-EQUIV="REFRESH" content="3; url=http://www.yourdomain.com/index.html">

The above HTML redirect code will redirect your visitors to another web page instantly. The content="3; may be changed to the number of seconds you want the browser to wait before redirecting. 4, 5, 8, 10 or 15 seconds, etc.

Upvotes: 4

LukeH
LukeH

Reputation: 269348

You're probably looking for the meta refresh tag:

<html>
    <head>
        <meta http-equiv="refresh" content="3;url=http://www.somewhere.com/" />
    </head>
    <body>
        <h1>Redirecting in 3 seconds...</h1>
    </body>
</html>

Note that use of meta refresh is deprecated and frowned upon these days, but sometimes it's the only viable option (for example, if you're unable to do server-side generation of HTTP redirect headers and/or you need to support non-JavaScript clients etc).

Upvotes: 82

Darin Dimitrov
Darin Dimitrov

Reputation: 1038730

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

Upvotes: 268

Related Questions