如果用户访问网站上的 5 个页面，则显示弹出消息

Question

我正在做一个我想展示的项目

1. 如果用户访问网站上的 5 个页面，则会显示一个弹出窗口
2. 如果用户在网站上停留 2 分钟，则会显示一个弹出窗口
3. 如果用户关闭弹出窗口，则不会再次显示弹出窗口。

唯一的问题是如果用户访问了 5 个页面。在我的代码中，如果用户访问主页 5 次，它会显示弹出窗口，如果用户访问其他 5 个页面，它就不起作用。

我想要什么“如果用户访问 5 个页面，它可以是网站上的任何页面显示弹出窗口”

这里是代码...

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

    // Timer

    if (localStorage.getItem('displayPopup') !== '0') {
        const openTime = Date.now();
      
        const totalVisitTime = +localStorage.getItem('totalVisitTime');
        console.log(totalVisitTime)
      
        setTimeout(() => {

          if(localStorage.displayPopup != 0) {
            setTimeout(function(){
                $(document.body).append(popup);
                SetCookie("upesy-cookie", 0);
            }, 2000);
        }
        
          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
          );
        });
      }
});

Answer 1

使用存储 API 比使用 cookie 更简单。您可以使用计数器延长计时器

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

function closePopup() {
  document.getElementById('sub-popup').remove();
  localStorage.setItem('displayPopup', 0);
}

function hidePopup() {
  closePopup();
  window.open(
    'https://upesy.us17.list-manage.com/subscribe/post?u=4f67f99a5b6bf0f744449df73&id=45f50ab267',
    '_blank'
  );
}

function displayPopup() {
  if (localStorage.getItem('displayPopup') !== '0') {
    /*setTimeout(function () {
      $(document.body).append(popup);
      SetCookie('upesy-cookie', 0);
    }, 2000);*/
    document.body.innerHTML += popup;
  }
  localStorage.setItem('displayPopup', '0');
  localStorage.removeItem('totalVisitTime');
  localStorage.removeItem('totalVisitCount');
}

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

  const totalVisitTime = +localStorage.getItem('totalVisitTime');
  console.log(totalVisitTime);

  const totalVisitCount = +localStorage.getItem('totalVisitCount') + 1;
  localStorage.setItem('totalVisitCount', totalVisitCount);
  console.log(totalVisitCount);

  if (totalVisitCount >= 5) {
    displayPopup();
  }

  setTimeout(() => {
    displayPopup();
  }, 12e4 - totalVisitTime);

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