浏览器上的后退按钮可以访问无缓存页面 [英] Back button on browser making no-cached page accessible

问题描述

因此，我正在HTML文档（la Snapchat）中测试这种临时图像功能。

我的图片在X秒后可见，之后页面重新加载并且显示的图片消失。在这种情况下，用户可以通过无数的方式来保存图片，我现在正专注于刷新功能。

我的JS代码刷新页面如下：

 < script> 
 window.setTimeout（function（）{
 window.location =example.com/page.html?nocache=+（new Date（））。getTime（）; 
}， 5000）; //刷新/ 5秒后重定向。 
< / script> 
  

我编写的代码在单次刷新后破坏了图像 - 所以上面的触发器完美地工作。但问题在于浏览器上的后退按钮。如果你按下它，你只需再次看到图像。游戏结束！

我已经在我的HTML文档中包含了以下元标记，但它们无济于事：

 < meta http-equiv =Cache-Controlcontent =max-age = 0> 
< meta http-equiv =Cache-Controlcontent =no-cache，no-store，must-revalidate> 
< meta http-equiv =Pragmacontent =no-cache> 
< meta http-equiv =Expirescontent =0> 
  

是否有任何方法可以确保浏览器后退按钮已从等式中删除，或者其效果被中和？请指教。

解决方案

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

 < script> 
 window.setTimeout（function（）{
 $（'img'）.remove（）; 
}，5000）; //刷新/ 5秒后重定向。 
< / script> 
  

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

要在此上下文中加载新图像，您需要使用AJAX请求并设置新的计时器。但这会导致后退按钮不能返回图像。

So I'm testing this ephemeral images functionality in an HTML document (a la Snapchat).

My images are visible for X seconds, after which the page reloads and the displayed images are gone. Sidestepping the myriad ways someone can save an image like that, I'm squarely focused on the refresh functionality at the moment.

My JS code to refresh the page is as follows:

<script>
window.setTimeout(function () {
    window.location = "example.com/page.html?nocache=" + (new Date()).getTime();
}, 5000); // refresh/redirect after 5 seconds.
</script>

I've written code that destroys the image after a single refresh - so the above trigger works perfectly. But the problem is the back button on the browser. If you press it, you simply get to see the image again. Game over!

I've already included the following meta tags in my HTML document, but they're not helping:

<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">

Is there any way to ensure the browser back button is removed from the equation, or its effect neutralized? Please advise.

解决方案

Don't refresh the page, instead use simple DOM manipulation to remove the image. If you have jQuery loaded, you can easily do it like so:

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

(You'll want to use a more specific selector if you have more than one image on the page)

To load a new image in this context, you'll need to use an AJAX request, and set a new timer. But this will cause the back button to not bring the image back.

这篇关于浏览器上的后退按钮可以访问无缓存页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！