Wuhan part-time female: Click the browser or phone back button to refresh the history page solution

Wuhan Part-time female : Click the browser or phone back button to refresh the history page solution

I wrote in the previous article how to go back to the previous page and refresh the page. This is where we click on a button to do the work. But if we do not click on a button, but directly click the Back button under the phone or the browser comes with a return button, how to refresh the previous history page?

Application Scenarios
If we have the following page list information page

Enter image description here

Click the go to Details page to change the data on the details page.

Enter image description here

Return to the list information page through history, because the list information is history returned, or default to display the original changes before the data, to refresh is the modified data. So how can we refresh the data in the previous History page by clicking the Phone back button or the browser back?

Related knowledge
Onpageshow event and OnLoad event. The Onpageshow event is similar to the OnLoad event, where the onload event is triggered the first time the page loads, and the Onpageshow event fires every time the page loads, that is, the OnLoad event does not fire when the page reads from the browser cache.

To see whether the page is uploaded directly from the server or read from the cache, you can use the persisted property of the Pagetransitionevent object to judge. Returns false if the page reads the property from the browser's cache and returns ture

Solution Solutions
First, through the onload way

The code is as follows:

Write a hidden input on 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 ();
}
}
Second, through the Onpageshow way

There is no problem with this approach on the computer, but Apple Safari returns no OnLoad event, as in the following way:

Window.onpageshow = function (event) {
if (event.persisted) {
Window.location.reload ()
}
};
The actual operation found that event.persisted in the computer has been returned false, but there is no problem in the mobile phone safari.

III. Integrated Solutions

Therefore, you can write the following code:

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 ();
}
}
}
The above code finds that the first time you open a page in Safari, there are sometimes splash screens.

Add the following code:

$ (window). Bind ("Unload", function () {});
There is no more splash screen effect.

4. Blocking the cache by means of an 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 approach has yet to be verified.

5. Clear Cache mode

I have also written in the previous blog several ways to clear the browser cache, Wuhan part-time female www.rfwcom.com/forum-81-1.html but this way, verified, does not work.

6. Forcing the refresh mode by time stamp

The following code is for the Safari back button issue 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 ()
{
Calculation time more than 500 milliseconds
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 ();
}
}

Wuhan part-time female: Click the browser or phone back button to refresh the history page solution