Question

我有一个弹出窗口，在查看主页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;    
    });

}

Answer 1

您可以使用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();用于确保我们将localstorage重置为新的时间戳，以便重新计算用户的活动（如果需要）。

Answer 2

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以重试。

浏览30秒后加载弹出窗口

2 个答案: