采用animate.css的多页面应用在ios设备回退页面时动画播放两次的解决方案

情景描述

该项目是一个多页面且都应用了animate.css实现动画效果的纯移动端项目。在实际真机测试时发现，在ios设备中，当用户点击浏览器回退/前进按钮时，或者location.href跳转到此前已经访问过的页面时，动画会重复播放两次。考虑到这次的问题和上次开发遇到的ios页面缓存问题很像，因此当即考虑是否是因为bfcache的缘故。

问题确定

在将点击【返回】按钮的a标签url中加上了时间戳参数后，页面正常显示，动画只播放了一次，因此可以确定为出现bug的原因就是bfcache。

不同的浏览器在对当前窗口打开历史记录中的前一个页面的表现上并不统一，这和浏览器的实现以及页面本身的设置有关系。

解决方法

尝试过的方法有：

1. html通过meta标签去设置HTTP的头部信息

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">  
<meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Expires" content="0">

（但在我的项目里没有起到作用

2. url加时间戳，让它不缓存

// 监听浏览器后退和前进事件
document.addEventListener("DOMContentLoaded", function () {
  window.addEventListener("popstate", function (event) {
    var timestamp = new Date().valueOf();
    window.location.href += "?" + timestamp;
  });
});
window.addEventListener("pageshow", function (e) {
  if (window.performance.navigation.type === 1) {
    // 清除当前页面的历史状态
    history.replaceState(null, null, location.href);
  }
});

参考

BFCache相关
IOS微信浏览器返回事件popstate监听