如果用户访问 5 个页面或用户在网站上停留 2 分钟，如何显示弹出窗口

Question

我想在网站上显示弹窗，场景是这样的。

1. 如果用户访问 5 个页面显示弹出窗口
2. 如果用户停留在网站上并花费 2 分钟显示弹出窗口
3. 如果用户关闭弹窗，下次就不会再出现了。

工作正常，但我不知道如何解决问题 2（如果用户停留在网站上并花 2 分钟显示弹出窗口）

我尝试使用本地存储，但没有帮助。

这里是代码...

var popup = '<div class="popup-cover" id="sub-popup">';
            popup += '<div id="subscribe-popup" class="popup">';
            popup += '<a class="close" onclick="closePopup()">&times;</a>';
            popup += '<h1 class="sub-title">Subscribe here!</h1>';
            popup += '<p class="sub-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
            popup += '<a class="btn sub-btn btn-nature" onclick="hidePopup()">Subscribe</a>';
            popup += '</div>';
            popup += '</div>';

function closePopup() {
    $('#sub-popup').remove();
    localStorage.displayPopup = 0;
}

function hidePopup() {
    $('#sub-popup').remove();
    localStorage.displayPopup = 0;
    window.open("https://upesy.us17.list-manage.com/subscribe/post?u=4f67f99a5b6bf0f744449df73&id=45f50ab267", "_blank");
}

jQuery(document).ready(function($) {

    function getCookieVal(offset) {
        var endstr = document.cookie.indexOf(";", offset);
        if (endstr == -1)
            endstr = document.cookie.length;
        return unescape(document.cookie.substring(offset, endstr));
    }

    function GetCookie(name) {
        var arg = name + "=";
        var alen = arg.length;
        var clen = document.cookie.length;
        var i = 0;
        while (i < clen) {
            var j = i + alen;
            if (document.cookie.substring(i, j) == arg)
                return getCookieVal(j);
            i = document.cookie.indexOf(" ", i) + 1;
            if (i == 0)
                break;
        }
        return null;
    }

    function SetCookie(name, value) {
        var argv = SetCookie.arguments;
        var argc = SetCookie.arguments.length;
        var expires = (2 < argc) ? argv[2] : null;
        var path = (3 < argc) ? argv[3] : null;
        var domain = (4 < argc) ? argv[4] : null;
        var secure = (5 < argc) ? argv[5] : false;
        document.cookie = name + "=" + escape(value) +
            ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
            ((path == null) ? "" : ("; path=" + path)) +
            ((domain == null) ? "" : ("; domain=" + domain)) +
            ((secure == true) ? "; secure" : "");
    }

    function displayPopup() {
        var expdate = new Date();
        var visit;
        expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
        if (!(visit = GetCookie("upesy-cookie")))
            visit = 0;
        visit++;

        SetCookie("upesy-cookie", visit, expdate, "/", null, false);
        
        if (visit >= 4) {
            if(localStorage.displayPopup != 0) {
                setTimeout(function(){
                    $(document.body).append(popup);
                    SetCookie("upesy-cookie", 0);
                }, 2000);
            }
        }
    }
    
    //window.onload = displayPopup
    $(window).on("load", displayPopup);

});

Answer 1

您可以将beforeunload 的时间存储在本地存储中，并在页面加载时设置计时器

if (localStorage.getItem('displayPopup') !== '0') {
  const openTime = Date.now();

  const totalVisitTime = +localStorage.getItem('totalVisitTime');
  document.getElementById('container').innerHTML = totalVisitTime;

  setTimeout(() => {
    alert('2 Minute Timeout');
    localStorage.setItem('displayPopup', '0');
    localStorage.removeItem('totalVisitTime');
  }, 12e4 - totalVisitTime);

  window.addEventListener('beforeunload', () => {
    if (localStorage.getItem('displayPopup') === '0') return;
    localStorage.setItem(
      'totalVisitTime',
      totalVisitTime + Date.now() - openTime
    );
  });
}

<div id="container"></div>

Answer 2

您可以在 JavaScript 中使用 setTimeout()。

setTimeout(() => {
    // Open popup
}, 120000); // Amount of time to wait, in miliseconds