2012-01-28 103 views
16

问题:我有一个网站,其中包含动态内容,每次用户看到它时都需要重新加载。这包括用户点击另一个站点上的后退按钮并到达需要重新加载的站点的用例。大多数(所有?)浏览器在此事件后不刷新网站。当通过浏览器返回按钮时重新加载站点

我的解决方案(这倒不工作): http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript

window.onbeforeunload = function() { 
    // This function does nothing. It won't spawn a confirmation dialog 
    // But it will ensure that the page is not cached by the browser. 
} 

但它仍然没有刷新页面。

任何想法可以影响/阻止所需的行为?分别针对这个问题的其他解决方案建议?

编辑:

设置如下:

Cache-Control private, must-revalidate, max-age=0 
Expires Sat, 26 Jul 1997 05:00:00 GMT 
Pragma no-cache 

和:

<meta name="cache-control" content="no-cache" /> 
<meta name="expires" content="0" /> 
<meta name="pragma" content="no-cache" /> 

仍然没有成功。

+0

您不应该尝试阻止浏览器缓存页面。当我使用后退按钮时,我希望我所在的页面能够像我离开时那样重新出现。但如果该页面具有自动更新元素,那么当我返回时,这些元素应该会继续更新。 – 2012-01-28 15:14:51

+0

可悲的是,有时你需要,例如:https://www.quora.com/Why-dont-payment-gateway-pages-support-Back-Button-Refresh – ptica 2017-06-07 09:56:51

回答

0

帮助吗?

Reload the page on hitting back button

或用meta标签,

<meta http-equiv="cache-control" content="no-cache"> <!-- tells browser not to cache --> 
<meta http-equiv="expires" content="0"> <!-- says that the cache expires 'now' --> 
<meta http-equiv="pragma" content="no-cache"> <!-- says not to use cached stuff, if there is any --> 

不知道,元会帮助,但你可以对其进行测试。

+0

nope仍然无法正常工作,请参阅我的编辑问题 – sorgenkind 2012-01-28 16:02:25

-1

我认为this question会帮助你。

[编辑(Nickolay):这就是为什么它可以这样工作:webkit.org, developer.mozilla.org。请阅读(在低于 单独的答案或我的总结)的文章,考虑是否真的需要做到这一点 ,使你的网页加载速度较慢的用户。]

Nickolay's answer

0

我想你需要完全重新加载 - window.location.reload()。但主要问题是跨浏览器简单的解决方案。 PHP上的代码:

$inline_javascript = 'var uniqueString = ' . time() . ';' . 
        'if (uniqueString === window.name) {' . 
        ' window.location.relace();' . 
        '} else {' . 
        ' window.name = uniqueString;' . 
        '}'; 

并将其打印在css和js文件之前。

2

这对我有用,在drupal 7(php)中,每当用户注销时,他都可以按下后退按钮并能够访问特权页面。如果页面被刷新,那么他会被路由到首页,他无法做任何事情。

<?php 
     //refresh the page after log-out and back button 
     if (!user_is_logged_in()) 
     { 

      print '<input type="hidden" id="refreshed" value="no"> 
       <script type="text/javascript"> 
        onload=function(){ 

        var e=document.getElementById("refreshed"); 
        if(e.value=="no")e.value="yes"; 
        else{e.value="no";location.reload();} 
        } 
       </script>'; 
     } 
    ?> 

有人张贴here:谢谢,我希望它也能帮助你。

54

您应该使用隐藏input作为刷新指标,与“无”的值:当您单击

$(document).ready(function(e) { 
    var $input = $('#refresh'); 

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes'); 
}); 

<input type="hidden" id="refresh" value="no"> 

现在使用jQuery,您可以检查它的价值在后退按钮上,隐藏字段中的值保留与最初离开页面时相同的值。

因此,您第一次加载页面时,输入的值将是“否”。当你回到页面时,它会是“是”,你的JavaScript代码将触发刷新。

+3

为我工作。我不得不使用location.reload(true)来强制服务器重新加载,否则它只是从缓存中重新加载。 – Kris 2014-08-07 18:56:49

+1

明亮而简单的答案。非常感谢。 – RohannG 2016-01-12 06:40:39

+1

效果非常好 - 谢谢。 – 2016-04-26 20:43:16

0

我发现了一个解决方案:将no-store添加到Cache-Control标头中。我在http头文件中完成了它,但我想它也可以与meta标签一起工作。经过Chromium和Firefox测试。也

How to stop chrome from caching

1

试试这个:

header("Cache-Control: no-store, must-revalidate, max-age=0"); 
header("Pragma: no-cache"); 
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); 

//过去

+0

这个答案详细解释它 - http://stackoverflow.com/a/2068407 – 2016-02-06 11:38:57

0

一个日期您可以使用此代码的自定义模块:

<?php 
/** 
* Implements hook_init(). 
*/ 
function MY_MODULE_init() { 
    drupal_add_http_header('Cache-Control', 'no-cache, no-store, max-age=0, must-revalidate, post-check=0, pre-check=0'); 
} 
?> 
9

后尝试了各种不同的解决方案,我发现JavaScript导航计时API工作b用于检测与后退按钮的交互。

所有你需要做的是这样的:

if(!!window.performance && window.performance.navigation.type == 2) 
{ 
    window.location.reload(); 
} 

而且它与所有主要的浏览器上运行良好:http://caniuse.com/#search=Navigation%20Timing%20API

Is My Page Being Loaded from the Browser Cache?

+0

我无法让它在Safari 11.0中工作。任何线索? – jorgetutor 2017-10-20 18:07:16

0

可以使用window.onpageshow事件以测试页面来自缓存。

window.onpageshow = function (event) { 
    if (event.persisted) { 
    window.location.reload(); //reload page if it has been loaded from cache 
    } 
}; 

请注意,这需要比以前的一些答案(如IE11 +)更现代的浏览器。有关浏览器支持的更多信息,请参见here

相关问题