如何让HTML5 Banner Ad仅循环3次，切换标签页后不再重置？

问题说明 #

需要实现的效果：

• 广告仅循环播放3次，播放完成后永久停止
• 点击广告打开新标签页跳转Exit URL，返回广告标签页后，广告不会重置重播

当前存在的问题：点击跳转返回后广告会重置重新播放，修改playCount参数无法解决该问题。

核心解决思路 #

利用localStorage持久化存储播放次数，避免页面切换或刷新后丢失计数；同时优化页面可见性监听逻辑，仅在播放次数未达上限时恢复播放，且不再重置计数。

修改后的完整代码 #

(function() {
  function onImagesLoaded(container, event) {
    var preloads = [];
    preloads.push.apply(preloads, container.getElementsByTagName("img"));
    preloads.push.apply(preloads, container.getElementsByTagName("lottie-player"));
    preloads.push.apply(preloads, container.getElementsByTagName("video"));
    var loaded = preloads.length;
    for (var i = 0; i < preloads.length; i++) {
      var tag = preloads[i].tagName.toLowerCase();
      if (tag === "lottie-player") {
        preloads[i].addEventListener("ready", function() {
          loaded--;
          if (loaded == 0) {
            event();
          }
        });
      } else if (tag === "video") {
        preloads[i].addEventListener('loadeddata', function() {
          loaded--;
          if (loaded == 0) {
            event();
          }
        }, false);
      } else if (tag === "img") {
        if (preloads[i].complete) {
          loaded--;
        } else {
          preloads[i].addEventListener("load", function() {
            loaded--;
            if (loaded == 0) {
              event();
            }
          });
        }
        if (loaded == 0) {
          event();
        }
      }
    }
  }

  onImagesLoaded(document.getElementById("b_13"), function() {
    var elements = document.getElementById("b_13").getElementsByClassName('js-bnfy');
    for (var i = 0; i < elements.length; i++) {
      elements[i].style.display = 'block';
    }

    // 从localStorage读取已播放次数，不存在则初始化为0
    var playCount = parseInt(localStorage.getItem('bannerPlayCount')) || 0;
    var maxPlays = 3; // 设置最大播放次数
    var lastPlay = false;
    var animationInterval;
    var exitTimeouts = [];

    function clearExitTimeouts() {
      exitTimeouts.forEach(clearTimeout);
      exitTimeouts = [];
    }

    function handleVisibilityChange() {
      if (document.hidden) {
        clearInterval(animationInterval);
        clearExitTimeouts();
      } else {
        // 仅当播放次数未达上限时恢复播放
        if (playCount < maxPlays) {
          animationInterval = setInterval(replayAnimations, 9000);
        }
      }
    }

    document.addEventListener("visibilitychange", handleVisibilityChange);

    function handleExits() {
      var el_img_9535 = document.getElementById("img_9535");
      var el_img_11122 = document.getElementById("img_11122");
      var el_img_9529 = document.getElementById("img_9529");
      var el_img_11124 = document.getElementById("img_11124");
      var el_img_4533 = document.getElementById("img_4533");

      el_img_4533.className = "bnfy-enter";
      var timeout = setTimeout(function() {
        el_img_4533.className = '';
        void el_img_4533.offsetWidth;
        el_img_4533.className = "bnfy-exit";
      }, 3200);
      exitTimeouts.push(timeout);
      
      var el_img_9534 = document.getElementById("img_9534");
      el_img_9534.className = "bnfy-enter";
      var timeout = setTimeout(function() {
        el_img_9534.className = '';
        void el_img_9534.offsetWidth;
        el_img_9534.className = "bnfy-exit";
      }, 3200);
      exitTimeouts.push(timeout);
      
      var el_img_9533 = document.getElementById("img_9533");
      el_img_9533.className = "bnfy-enter";
      var timeout = setTimeout(function() {
        el_img_9533.className = '';
        void el_img_9533.offsetWidth;
        el_img_9533.className = "bnfy-exit";
      }, 3600);
      exitTimeouts.push(timeout);
      
      var el_img_4528 = document.getElementById("img_4528");
      var el_img_4526 = document.getElementById("img_4526");
      var el_img_13 = document.getElementById("img_13");
    }

    // 初始化时判断是否需要启动播放
    var playbackLoop;
    if (playCount < maxPlays) {
      // 如果是第一次播放，先执行一次动画
      if (playCount === 0) {
        handleExits();
        playCount++;
        localStorage.setItem('bannerPlayCount', playCount);
      }
      playbackLoop = animationInterval = setInterval(function() {
        playCount++;
        localStorage.setItem('bannerPlayCount', playCount);
        lastPlay = playCount === maxPlays - 1;
        replayAnimations();

        if (playCount >= maxPlays) {
          clearInterval(playbackLoop);
          // 可选：播放完成后可以清除localStorage，或者保留以便后续不再播放
          // localStorage.removeItem('bannerPlayCount');
        }
      }, 9000);
    }

    function replayAnimations() {
      var banner = document.getElementById("b_13");
      if (banner && playCount < maxPlays) {
        var elements = banner.children;
        for (var i = 0; i < elements.length; i++) {
          if (elements[i] && elements[i].tagName.toLowerCase() !== 'script' && elements[i].tagName.toLowerCase() !== 'style' && elements[i].tagName.toLowerCase() !== 'noscript') {
            var display = elements[i].style.display;
            elements[i].style.display = 'none';
            void elements[i].offsetWidth;
            elements[i].style.display = display;
          }
        }
      }

      if (playCount < maxPlays) {
        handleExits();
      }
    }
  });
  if (!Enabler.isInitialized()) {
    Enabler.addEventListener(
      studio.events.StudioEvent.INIT,
      enablerInitialized);
  } else {
    enablerInitialized();
  }

  function enablerInitialized() {
    if (!Enabler.isVisible()) {
      Enabler.addEventListener(
        studio.events.StudioEvent.VISIBLE,
        adVisible);
    } else {
      adVisible();
    }
  }

  function adVisible() {
    function bgExitHandler(e) {
      Enabler.exit('Background Exit');
    }
    document.getElementById('b_13').addEventListener('click', bgExitHandler, false);
  }
})();

关键修改点说明 #

• 持久化计数：用localStorage.getItem('bannerPlayCount')读取已播放次数，每次播放后用localStorage.setItem更新存储，确保页面切换后计数不丢失。
• 播放逻辑优化：初始化时先判断已播放次数，仅当次数未达3次时才启动播放；页面可见性恢复时，不再重置计数，只在未达上限时继续播放。
• 终止条件调整：当playCount达到3次时，清除定时器，停止后续播放；同时在replayAnimations中加入播放次数判断，避免无效执行动画。

内容的提问来源于stack exchange，提问作者Colourform