浏览30秒后加载弹出窗口

Load popup after 30 seconds of browsing

本文关键字：窗口 加载 30秒 浏览      更新时间：2023-09-26

我有一个浏览主页30秒后加载的弹出窗口。是否有可能在浏览网站30秒后加载它，而不仅仅是一个特定的页面?

谢谢。

更新:

当前代码仍然只在每页加载30秒后加载该框

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;    
    });
}

您可以使用Local Storage，以便在用户访问站点时保存时间戳，然后编写一个简单的SetInterval以在特定的时间间隔检查该时间戳。如果当前时间戳与保存的时间戳相差超过30秒，则可以启动弹出窗口。

这在Javascript中很棘手。根据你的网站设计不同的方法是必需的。另外，如果是出于安全考虑，最好使用AJAX和通过服务器进行验证。Javascript可以很容易地被用户操纵/阻止，你的代码也可以很容易地避免。

一个简单的例子让你开始:

在您的index页面插入以下代码:

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

我们已经声明了一个"var myDaemon = '';"，这样我们就可以在那里保存我们的守护进程id，并在以后有效地从我们的任何页面中清除它们。然后在要检查活动的页面插入以下代码:

 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);
  • if(myDaemon) clearInterval(myDaemon);在那里确保我们不会重叠守护进程，并在访问几个页面后以一百万的警报结束。
  • 警报后的clearInterval(myDaemon);确保我们在达到目标时停止守护进程。
  • localStorage.myTimestamp = Date.now();确保我们将本地存储重置为新的时间戳，以便重新计算用户的活动(如果需要)。

1)定义cookie函数(从w3school复制)

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

2)创建cookie如果用户没有一个

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

3)循环检测用户访问是否超过30秒

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);
}

参见jsfiddle，你可以在两个页面上尝试它，你不应该在触发一次后重新加载页面上得到popupBox。清理浏览器cookie再试一次

相关文章：