Load popup after 30 seconds of browsing

问题

I have a popup which is loaded after 30 seconds of viewing the homepage. Is it possible to have it load after 30 seconds of browsing the site and not just a particular page?

Thanks.

Update:

Current code still only loads the box after 30 seconds on each page load

var myDaemon = '';
localStorage.setItem('myTimestamp', Date.now());

if(myDaemon) clearInterval(myDaemon);
    myDaemon = setInterval(function(){
    var TimeDiffinSeconds = (Date.now() - localStorage.myTimestamp) / 1000;
    if( TimeDiffinSeconds > 30){
        requestcallback();
        clearInterval(myDaemon);
        localStorage.myTimestamp = Date.now();
    }
},1000);


function requestcallback(){
    // localStorage.clear();
    var popup
    if(localStorage["popup"] != null){
        var timestamp = new Date().getTime(),
            last_here = new Date();

        last_here.setTime(localStorage["popup"]);

        var current = last_here.getTime() + (7 * 24 * 60 * 60 * 1000);

        if(current < timestamp){
            popup = setTimeout(showPopup, 1);
        }
    }
    else{
        popup = setTimeout(showPopup, 1);   
    }

    function showPopup(){
        jQuery('.overlay').fadeIn();
        clearTimeout(popup);    
    }

    jQuery('.overlay .close').click(function(){
        jQuery('.overlay').fadeOut();
        var current = new Date().getTime();
        localStorage["popup"] = current;    
    });

}

回答1:

You could use Local Storage in order to save a time-stamp the moment the user visits the site , and then code a simple SetInterval to check that timestamp in specific intervals. If the difference between the current timestamp and the one saved is more than 30 seconds , you can launch your popup.

This is tricky with Javascript though. Depending on your Sites Design a different Approach is required. Also if it is for Security reasons , this is best done with AJAX and Validation through a Server. Javascript can be easily manipulated / prevented from a user and your code can be easily avoided.

A simple Example to get you going :

At your index page insert the following code :

<script>
  var myDaemon = '';
  localStorage.setItem('myTimestamp', Date.now());
</script>

We have declared a "var myDaemon = '';" so that we can hold our Daemons IDs in there and effectively Clearing them from any of our pages later. Then at the Pages that you want to check for activity insert the following code :

 if(myDaemon) clearInterval(myDaemon);
 myDaemon = setInterval(function(){
   var TimeDiffinSeconds = (Date.now() - localStorage.myTimestamp) / 1000;
   if( TimeDiffinSeconds > 30){
     alert('You have been browsing for more than 30 Seconds');
     clearInterval(myDaemon);
     localStorage.myTimestamp = Date.now();
   }
 },1000);

• The if(myDaemon) clearInterval(myDaemon); is there to make sure we do not overlap Daemons and end up with a million of Alerts after visiting a few pages.
• The clearInterval(myDaemon); after the alert is there to make sure that we stop the Daemon when we reach our goal.
• The localStorage.myTimestamp = Date.now(); is there to make sure we reset our localstorage to a new Timestamp , in order to recalculate the activity of the user (if needed).

回答2:

1) Define cookie functions (copy from w3school)

function setCookie(cname, cvalue, exdays) {...}
function getCookie(cname) {...}
function checkCookie() {...}

2) Create cookie if user doesn't have one

getCookie('user_first_visited') || setCookie('user_first_visited', Date.now());

3) Loop detecting if user visited over 30 seconds

if (!getCookie('user_popup_triggerred')) {
    var loopDetect = setInterval(function(){
        var TimePast = (Date.now() - getCookie('user_first_visited')) / 1000;
        if( TimePast > 5){
            alert('Browsed any page more than 5 Seconds');
            clearInterval(loopDetect);
            setCookie('user_popup_triggerred', 1);
        }
    }, 1000);
}

See jsfiddle, you can try it on two pages and you should not get popupBox on page reload after triggered once. Clean your browser cookie to try again.

来源：https://stackoverflow.com/questions/38140363/load-popup-after-30-seconds-of-browsing