Redirect (Page Visibility API)

JavaScript
1

Hello ,
so what i want is when my website is loading in the background and the user goes to it for example after 5s it redirect to PAGE 1.
if the user goes to my website after 1 hour it redirect to Page2.

Cheers,

3

With the page visibility API, just start a timer when the user visibilityState changes to hidden (if the timer is stopping while hidden, maybe store the start time in local storage or something). When they come back, another event will cause the visibilityState to change to visible and take the difference of the two times. Based on the time duration, you can set the window.location.href to whatever page you want.

Should be pretty easy to get started. :slight_smile:

4

Hi,
the visibilityState is already hidden since the website is running in the background.
it change to active after the user visit the page and at that moment i want it to redirect to page A or B depending the timer .
and i really struggle doing the code.

5

Ok well at some point you need to be able to have a start time. So whenever you think that should start, you need to have something start the time. Otherwise how would you know the duration? So as your website begins running in the background, start the timer or at least record the current timestamp. You can do this with the Date object getTime() method. Then on the visibility state change back to visible, take a snapshot of the current timestamp and subtract.

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
    let currentDate = new Date();
    let duration = currentDate.getTime() - startTime; //<--- startTime created before and is global
    
    if ((duration > 0) && (duration <= 5000)) {
       window.location.href = "http://example.com/page1.html";
    } else if ((duration > 5000) && (duration <= 10000)) {
       window.location.href = "http://example.com/page2.html";
    } else {
       window.location.href = "http://example.com/page3.html";
    }
  } 
});

This is just off the top of my head, so may need tweaking, but I am sure you get the idea. :slight_smile:

1 Like
6 
<head>
    <style>
        #page{
            display: none;
        }
        #loading{
            display: block;
        }
    </style>
    <script>
        function myFunction()
        {
            document.getElementById("page").style.display = "block";
            document.getElementById("loading").style.display = "none";
        }
    </script>
</head>

<body onload="myFunction()">
    <div id="page">

    </div>
    <div id="loading">

    </div>
7

can you elaborate.

8

it shows a loading screen white the site is loading in the background and one the website gets done loading it shows the normal page.

9

not really what i was looking for.
my website is running in the background that mean’s visibilityState =hidden.

when user visit the website visibilityState is active now depending of the time redirect to page A or B.

10

oh Sorry, I did not read it correctly.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.