Cliquer sur le bouton Précédent du navigateur actualisera la page d'historique. Solution à ce problème.

Tout d'abord, nous savons comment ce problème se produit. Si nous avons la page d'informations de liste de pages suivante, cliquez pour accéder à la page de détails, modifiez les données sur la page de détails et retournez-les dans l'historique, puis revenez à la liste. page d'information, car les informations de la liste sont un retour historique Oui, les données d'origine avant modification sont toujours affichées par défaut et les données modifiées doivent être actualisées. Alors, y a-t-il un moyen de cliquer sur le bouton de retour au téléphone pour rafraîchir les données de la page historique précédente ?

événement onpageshow et événement onload. L'événement onpageshow est similaire à l'événement onload. L'événement onload est déclenché lorsque la page est chargée pour la première fois. L'événement onpageshow est déclenché à chaque fois que la page est chargée. lire à partir du cache du navigateur.

Pour voir si la page a été chargée directement depuis le serveur ou lue depuis le cache, vous pouvez utiliser l'attribut

persistant de l'objet PageTransitionEvent . Si la page lit cet attribut depuis le cache du navigateur, elle renvoie vrai, sinon elle renvoie faux

Solution

Par méthode onload

Le code est le suivant :

Écrivez une entrée masquée dans la page

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

Le fonctionnement js est le suivant

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

Utilisez la méthode onpageshow

Cette méthode ne pose aucun problème sur l'ordinateur, mais Apple Pour renvoyer l'événement onload sans l'exécuter dans Safari, utilisez la méthode suivante :

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

Grâce à l'opération réelle, nous avons constaté que event.persisted renvoie toujours false sur l'ordinateur, mais il y a pas de problème sur le téléphone mobile Safari.

Solution complète

Par conséquent, vous pouvez écrire le code comme suit :

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

Grâce au code ci-dessus, j'ai découvert que lorsque la page est ouverte pour la première fois dans Safari, un effet d'écran de démarrage apparaîtra parfois.

Ajoutez le code suivant :

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

L'effet d'écran de démarrage n'apparaîtra plus.

Empêcher la mise en cache via iframe

Ajoutez le code suivant à la page

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

Cette méthode doit être vérifiée.

Forcer la méthode d'actualisation via

horodatage

Le code suivant concerne le problème du bouton de retour Safari sur 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();
    }
}

Je crois que vous avez lu ces cas Après avoir maîtrisé la méthode, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php pour un contenu plus passionnant !

Lecture connexe :

Comment convertir l'encodage CSS

css3 cliquez pour afficher les effets d'entraînement

Comment utiliser le canevas pour créer un effet d'animation de fontaine de particules

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!