Clicking the browser's back button will refresh the history page. Solution to this problem

First of all, we know how this problem occurs. If we have the following page list information page, click to enter the details page, modify the data on the details page and return it through history, and then return to the list information page, because the list information is a history return Yes, the original data before modification is still displayed by default, and the modified data needs to be refreshed. So, is there any way for us to refresh the data in the previous history page by clicking the return button on the mobile phone?

onpageshow event and onload event. The onpageshow event is similar to the onload event. The onload event is triggered when the page is loaded for the first time. The onpageshow event is triggered every time the page is loaded. That is, the onload event is not triggered when the page is read from the browser cache.

To see whether the page was loaded directly from the server or read from the cache, you can use the persisted attribute of the PageTransitionEvent object to determine. If the page reads this attribute from the browser's cache, it returns true, otherwise it returns false

Solution

By onload method

The code is as follows:

Write a hidden input in the page

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

js operation is as follows

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

Through onpageshow method

This method is no problem on the computer, but it does not return in Apple Safari To execute the onload event, use the following method:

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

Through actual operation, we found that event.persisted always returns false on the computer, but there is no problem on the mobile phone safari.

Comprehensive solution

Therefore, you can write the code as follows:

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

Through the above code, I found that when the page is opened for the first time in Safari, sometimes a splash screen will appear. Effect.

Add the following code:

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

The splash screen effect will no longer appear.

Prevent caching through iframe

Add the following code to the page

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

This method needs to be verified.

By TimestampForced refresh method

The following code is for the safari return button problem in iPad

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

I believe you have mastered it after reading these cases Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to convert CSS encoding

css3 click to display ripple effects

How to use canvas to create the effect of particle fountain animation

The above is the detailed content of Clicking the browser's back button will refresh the history page. Solution to this problem. For more information, please follow other related articles on the PHP Chinese website!