뒤로 버튼을 클릭 할 때 캐시에서 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();
}
});
'IT Share you' 카테고리의 다른 글
왜 그리고 어떻게 고치는가? (0) | 2020.12.02 |
---|---|
텍스트 필드의 텍스트 삭제 UI 테스트 (0) | 2020.12.02 |
사이트 일치 검색어가 없습니다. (0) | 2020.12.02 |
Google Cloud Storage에서 많은 파일을 어떻게 공개합니까? (0) | 2020.12.02 |
phpmyadmin을 사용하여 저장 프로 시저를 작성하는 방법과 PHP를 통해 사용하는 방법은 무엇입니까? (0) | 2020.12.02 |