web-dev-qa-db-ja.com

戻るボタンがクリックされたときにキャッシュからサファリをロードしないようにする

戻るボタンをクリックすると、サファリが古いYouTubeビデオをロードする際に問題が発生しました。 bodyタグにonunload = ""（ここでは Safari 5のバックボタンのキャッシュの防止 ）を追加しようとしましたが、この場合は機能しません。

特定のページでキャッシュからのサファリの読み込みを防ぐ方法はありますか？

javascriptcachingsafariback-button
59
Mark Steggles

問題は back-forwardキャッシュ が原因です。ユーザーが離れるときにページの完全な状態を保存することになっています。ユーザーが戻るボタンで戻る場合、キャッシュからページを非常にすばやくロードできます。これは、HTMLコードのみをキャッシュする通常のキャッシュとは異なります。

Bfcacheのページが読み込まれると、onloadイベントはトリガーされません。代わりに、persistedイベントのonpageshowプロパティを確認できます。最初のページの読み込み時にfalseに設定されます。ページがbfcacheから読み込まれると、trueに設定されます。

Kludgishの解決策は、bfcacheからページがロードされたときに強制的にリロードすることです。

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

JQueryを使用している場合：

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        window.location.reload() 
    }
});
168
Mika Tuupola

はい。SafariブラウザはFirefoxと同じように戻る/進むボタンのキャッシュを処理しません。Chromeと同じです。vimeoやyoutubeビデオなどのiframeは、新しいiframe.srcがありますがほとんどキャッシュされません。

これを処理する3つの方法を見つけました。あなたのケースに最適なものを選択してください。 Firefox 53およびSafari 10.1でテストされたソリューション

1。ユーザーが戻る/進むボタンを使用しているかどうかを検出してから、ページ全体を再読み込みするか、srcを置き換えることでキャッシュされたiframeのみを再読み込みします

if (!!window.performance && window.performance.navigation.type === 2) {
            // value 2 means "The page was accessed by navigating into the history"
            console.log('Reloading');
            //window.location.reload(); // reload whole page
            $('iframe').attr('src', function (i, val) { return val; }); // reload only iframes
        }

2。ページがキャッシュされている場合、ページ全体を再読み込みします

window.onpageshow = function (event) {
        if (event.persisted) {
            window.location.reload();
        }
    };

。履歴からページを削除して、戻る/進むボタンでページに再度アクセスできないようにする

$(function () {
            //replace() does not keep the originating page in the session history,
            document.location.replace("/Exercises#nocache"); // clear the last entry in the history and redirect to new url
        });
6
Javan R.

これらの答えはすべて、ちょっとしたハックです。最新のブラウザ（safari）では、onpageshowソリューション作業のみで、

window.onpageshow = function (event) {
    if (event.persisted) {
        window.location.reload();
    }
};

ただし、低速のデバイスでは、リロードされる前に1秒前にキャッシュされたビューが表示されることがあります。この問題に対処する適切な方法は、1つの怒鳴りに対するサーバーの応答でCache-Controlを適切に設定することです。

'Cache-Control', 'no-cache, max-age=0, must-revalidate, no-store'

5
waj-er-rr

アンカーを使用して、ドキュメントの場所hrefの値を監視できます。

http://acme.co/で始め、 '＃b'などの場所に何かを追加します。

したがって、URLはhttp://acme.co/#bになり、ユーザーが[戻る]ボタンを押すと、http://acme.coに戻ります。間隔チェック機能は、設定したハッシュタグがないことを確認し、間隔をクリアします。タイムスタンプが付加された参照URLをロードします。

いくつかの副作用がありますが、それらを把握するためにあなたを残します;）

<script>
document.location.hash = "#b";
var referrer = document.referrer;

// setup an interval to watch for the removal of the hash tag
var hashcheck = setInterval(function(){
    if(document.location.hash!="#b") {

    // clear the interval
    clearInterval(hashCheck);

    var ticks = new Date().getTime();
    // load the referring page with a timestamp at the end to avoid caching
    document.location.href.replace(referrer+'?'+ticks);
    }
},100);
</script>

これはテストされていませんが、最小限の調整で機能するはずです。

1
L422Y

まず、コード内の挿入フィールド：

<input id="reloadValue" type="hidden" name="reloadValue" value="" />

次にjQueryを実行します。

jQuery(document).ready(function()
{
        var d = new Date();
        d = d.getTime();
        if (jQuery('#reloadValue').val().length == 0)
        {
                jQuery('#reloadValue').val(d);
                jQuery('body').show();
        }
        else
        {
                jQuery('#reloadValue').val('');
                location.reload();
        }
});
0
Ivan Laharnar mink.si

この動作は、Safariのバック/フォワードキャッシュに関連しています。関連するApple documentation： http://web.archive.org/web/20070612072521/http://developer.Apple.com/internet/でそれについて学ぶことができます。 safari/faq.html＃anchor5

Apple自身の修正案は、空のiframeをページに追加することです。

<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
    this frame prevents back forward cache
</iframe>

（以前に受け入れられた答えも有効であるように思われますが、単にドキュメントと別の潜在的な修正を追加したかっただけです）

0
Simon Boudrias