2012-01-28 62 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

相關問題