집 > 기사 > 웹 프론트엔드 > 브라우저의 뒤로 버튼을 클릭하면 기록 페이지가 새로 고쳐집니다.

브라우저의 뒤로 버튼을 클릭하면 기록 페이지가 새로 고쳐집니다.

php中世界最好的语言원래의: 2017-11-27 11:24:515567검색

먼저 이 문제가 어떻게 발생하는지 알고 있습니다. 다음 페이지 목록 정보 페이지가 있으면 클릭하여 세부정보 페이지에 들어가 세부정보 페이지의 데이터를 수정하고 기록을 통해 반환한 다음 목록 정보 페이지로 돌아갑니다. , 목록 정보는 과거에 반환되기 때문에 기본적으로 수정 전 원본 데이터가 계속 표시되며, 수정된 데이터를 새로 고쳐야 하는데, 반환을 클릭하여 이전 기록 페이지의 데이터를 새로 고칠 수 있는 방법이 있습니까? 버튼이 휴대폰에 있나요?

onpageshow 이벤트와 onload 이벤트. onpageshow 이벤트는 onload 이벤트와 유사하며 페이지가 처음 로드될 때 발생합니다. 즉, 페이지가 로드될 때 onload 이벤트가 발생하지 않습니다. 브라우저 캐시에서 읽습니다.

페이지가 서버에서 직접 로드되는지 아니면 캐시에서 읽는지 확인하려면 PageTransitionEvent 개체 의 지속형 속성 을 사용하여 확인할 수 있습니다. 페이지가 브라우저 캐시에서 이 속성을 읽으면 true를 반환하고, 그렇지 않으면 false를 반환합니다

해결책

By onload 메서드

코드는 다음과 같습니다.

페이지에서 숨겨진 입력

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

js 작업을 다음과 같이 작성합니다. Follows

    onload=function(){
        var refreshedId=document.getElementById("refreshed");
        if(refreshedId.value=="no"){
            refreshedId.value="yes";
           } else{
             refreshedId.value="no";
             location.reload();
         }
    }

onpageshow 방식을 통해

이 방식은 컴퓨터에서는 문제가 없으나 Apple Safari에서는 onload 이벤트가 실행되지 않는 경우가 있으니,

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

실제 동작을 통해 확인한 결과입니다. event.persisted는 컴퓨터에서는 항상 false를 반환하지만 모바일 사파리에서는 문제가 없습니다.

종합 솔루션

그래서 다음과 같이 코드를 작성하시면 됩니다.

  if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
        window.onpageshow = function(event) {
            if (event.persisted) {
                window.location.reload() 
            }
        };
    }else{
        onload=function(){
            var refreshedId=document.getElementById("refreshed");
            if(refreshedId.value=="no"){
                refreshedId.value="yes";
               } else{
                 refreshedId.value="no";
                 location.reload();
             }
        }
    }

위의 코드를 통해 사파리에서 페이지를 처음 열었을 때 가끔 스플래시 화면 효과가 나타나는 것을 발견했습니다.

다음 코드를 추가하세요:

$(window).bind("unload", function() { });

스플래시 화면 효과가 더 이상 나타나지 않습니다.

iframe을 통한 캐싱 방지

페이지에 다음 코드를 추가하세요

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

이 방법은 확인이 필요합니다.

By timestamp강제 새로 고침 방법

다음 코드는 iPad의 Safari 반환 버튼 문제에 대한 것입니다.

var showLoadingBoxSetIntervalVar;
var showLoadingBoxCount = 0;
var showLoadingBoxLoadedTimestamp = 0
function showLoadingBox(text) {
    var showLoadingBoxSetIntervalVar=self.setInterval(function(){showLoadingBoxIpadRelaod()},1000);
    showLoadingBoxCount = 0
    showLoadingBoxLoadedTimestamp = new Date().getTime();
    //Here load the spinner
}
function showLoadingBoxIpadRelaod()
{
    //计算时间超过500毫秒
    var diffTime = ( (new Date().getTime()) - showLoadingBoxLoadedTimestamp - 500)/1000;
    showLoadingBoxCount = showLoadingBoxCount + 1;
    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    if(diffTime > showLoadingBoxCount && isiPad){
        location.reload();
    }
}

이 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. 더 흥미로운 정보를 보려면 다른 관련 기사에 주목하세요. PHP 중국어 웹사이트에서!