


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:
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



Realize the gap effect of card coupon layout. When designing card coupon layout, you often encounter the need to add gaps on card coupons, especially when the background is gradient...

Using locally installed font files in web pages Recently, I downloaded a free font from the internet and successfully installed it into my system. Now...

How to obtain dynamic data of 58.com work page while crawling? When crawling a work page of 58.com using crawler tools, you may encounter this...

Why do negative margins not take effect in some cases? During programming, negative margins in CSS (negative...

The method of customizing resize symbols in CSS is unified with background colors. In daily development, we often encounter situations where we need to customize user interface details, such as adjusting...

The problem of container opening due to excessive omission of text under Flex layout and solutions are used...

Implementing responsive layouts using CSS When we want to implement layout changes under different screen sizes in web design, CSS...

iconfont...
