브라우저의 뒤로 버튼을 클릭하면 기록 페이지가 새로 고쳐집니다.-HTML 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2017-11-27 11:24:51

원래의

5718명이 탐색했습니다.

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

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

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

해결책

By onload 메서드

코드는 다음과 같습니다.

페이지에서 숨겨진 입력

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

로그인 후 복사

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

다음 코드를 추가하세요:

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