浏览器上的后退按钮使无缓存页面可访问答案

【问题标题】：Back button on browser making no-cached page accessible浏览器上的后退按钮使无缓存页面可访问
【发布时间】：2016-03-16 17:54:25
【问题描述】：

所以我正在一个 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">

有什么方法可以确保从等式中删除浏览器后退按钮，或者取消其效果？请指教。

【问题讨论】：

将图像存储在会话变量中，当用户离开页面时该变量被销毁，或者在用户第一次到达页面时被清除 - 假设您只希望您的用户只见一次，无处保存。
@Lewis 不能解决 OP 的后退按钮问题。如果您按下后退按钮，现代浏览器不会刷新页面。
@t.niese 如果在页面顶部专门这样做，它不会被销毁吗？例如，如果您将图像存储在$_SESSION['image'] 中并在每次页面加载时再次设置它之前擦除该变量，即$_SESSION['image'] = ''，那么当用户按下后退按钮时，这不会是空白吗？我可能误解了后退按钮的实际工作原理。
杀死图像onunload，这样你就不能返回（）它了。 history.replaceState() 也可以用来代替 location= 使 back() “返回 2”，从而返回到 img 之前的页面
刷新除了删除图片还有其他功能吗？如果没有，只需删除图像而不是刷新，则没有可返回的版本。

标签： javascript html

【解决方案1】：

不要刷新页面，而是使用简单的 DOM 操作来删除图像。如果你加载了 jQuery，你可以很容易地这样做：

<script>
window.setTimeout(function () {
    $( 'img' ).remove();
}, 5000); // refresh/redirect after 5 seconds.
</script>

（如果页面上有多个图像，则需要使用更具体的选择器）

要在这种情况下加载新图像，您需要使用 AJAX 请求并设置新计时器。但这会导致返回按钮无法返回图像。

【讨论】：