IT Share you

뒤로 버튼을 클릭 할 때 캐시에서 Safari로드 방지

shareyou 2020. 12. 2. 22:12
반응형

뒤로 버튼을 클릭 할 때 캐시에서 Safari로드 방지


뒤로 버튼을 클릭 할 때 이전 YouTube 동영상을로드하는 safari에 문제가 있습니다. 본문 태그에 onunload = ""(여기 에 Safari 5의 back-button에서 캐시 방지에 언급 됨)를 추가하려고했지만 이 경우에는 작동하지 않습니다.

특정 페이지의 캐시에서 Safari로드를 방지하는 방법이 있습니까?


역방향 캐시로 인해 문제가 발생 합니다 . 사용자가 멀리 이동할 때 페이지의 완전한 상태를 저장하도록되어 있습니다. 사용자가 뒤로 버튼을 사용하여 뒤로 이동하면 캐시에서 페이지를 매우 빠르게로드 할 수 있습니다. 이것은 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() 
    }
});

예, Safari 브라우저는 Firefox 및 Chrome과 마찬가지로 뒤로 / 앞으로 버튼 캐시를 처리하지 않습니다. 특히 vimeo 또는 youtube 비디오와 같은 iframe은 새로운 iframe.src가 있지만 거의 캐시되지 않습니다.

나는 이것을 처리하는 세 가지 방법을 찾았습니다. 귀하의 경우에 가장 적합한 것을 선택하십시오. 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();
        }
    };

3. 사용자가 뒤로 / 앞으로 버튼으로 페이지를 다시 방문 할 수 없도록 기록에서 페이지를 제거합니다.

$(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
        });

그 모든 대답은 약간의 해킹입니다. 최신 브라우저 (safari)에서는 onpageshow솔루션 작업 에서만

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

그러나 느린 장치에서는 때때로 다시로드되기 전에 캐시 된 이전보기를 잠시 볼 수 있습니다. 이 문제를 처리하는 올바른 방법은 서버 응답에 대해 적절한 Cache-Control을 다음과 같이 설정하는 것입니다.

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


앵커를 사용하고 문서의 위치 href 값을 볼 수 있습니다.

로 시작하여 http://acme.co/'#b'와 같이 위치에 추가합니다.

따라서 이제 URL은입니다 http://acme.co/#b. 사람이 뒤로 버튼을 누르면로 돌아가고 http://acme.co간격 확인 기능은 우리가 설정 한 해시 태그가 없음을 확인하고 간격을 지우고 타임 스탬프가 추가 된 참조 URL을로드합니다. 그것에.

There are some side-effects, but I'll leave you to figure those out ;)

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

This is untested but it should work with minimal tweaking.


The behavior is related to Safari's Back/Forward cache. You can learn about it on the relevant Apple documentation: http://web.archive.org/web/20070612072521/http://developer.apple.com/internet/safari/faq.html#anchor5

Apple's own fix suggestion is to add an empty iframe on your page:

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

(The previous accepted answer seems valid too, just wanted to chip in documentation and another potential fix)


First of all insert field in your code:

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

then run 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();
        }
});

참고URL : https://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked

반응형