所以我正在HTML文档(类似于Snapchat)中测试这种短暂的图像功能。
我的图像可见 X 秒,之后页面重新加载,显示的图像消失。避开人们可以保存此类图像的无数方式,我目前专注于刷新功能。
我刷新页面的JS代码如下:
<script>
window.setTimeout(function () {
window.location = "example.com/page.html?nocache=" + (new Date()).getTime();
}, 5000); // refresh/redirect after 5 seconds.
</script>
我编写了在单次刷新后销毁图像的代码 - 因此上述触发器完美运行。但问题是浏览器上的后退按钮。如果你按下它,你只需再次看到图像。游戏结束!
我已经在我的 HTML 文档中包含了以下元标记,但它们没有帮助:
<meta http-equiv="Cache-Control" content="max-age=0">
<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">
有没有办法确保浏览器后退按钮从等式中删除,或者其效果被中和?请指教。
不要刷新页面,而是使用简单的 DOM 操作来删除图像。如果你加载了jQuery,你可以很容易地这样做:
<script>
window.setTimeout(function () {
$( 'img' ).remove();
}, 5000); // refresh/redirect after 5 seconds.
</script>
(如果页面上有多个图像,则需要使用更具体的选择器)
若要在此上下文中加载新映像,需要使用 AJAX 请求,并设置新的计时器。但这会导致后退按钮无法恢复图像。