ホームページ > 記事 > ウェブフロントエンド > ブラウザの「戻る」ボタンをクリックすると、履歴ページが更新されます。

ブラウザの「戻る」ボタンをクリックすると、履歴ページが更新されます。

php中世界最好的语言オリジナル: 2017-11-27 11:24:515567ブラウズ

まず、この問題がどのように発生するかがわかります。次のページのリスト情報ページがある場合、クリックして詳細ページに入り、詳細ページでデータを変更して履歴を返し、リスト情報ページに戻ります。リスト情報は履歴的に返されるため、デフォルトでは変更前の元のデータが表示され、変更されたデータを更新する必要があります。それでは、戻るをクリックして前の履歴ページのデータを更新する方法はありますか。携帯電話のボタン?

onpageshow イベントと onload イベント。 onpageshow イベントは、onload イベントと似ています。onload イベントは、ページが初めて読み込まれるときにトリガーされます。つまり、onload イベントは、ページが読み込まれるたびにトリガーされます。ブラウザのキャッシュから読み取られます。

ページがサーバーから直接読み込まれたのか、それともキャッシュから読み取られたのかを確認するには、PageTransitionEvent オブジェクトの永続化された属性を使用して判断できます。ページがブラウザのキャッシュからこの属性を読み取った場合は true を返し、それ以外の場合は false を返します

解決策

onload メソッドによる

コードは次のとおりです:

ページに非表示の input

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

js オペレーションを次のように記述します以下

    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 を返しますが、モバイル Safari では問題ありません。

包括的な解決策

したがって、次のようにコードを書くことができます:

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

上記のコードを通じて、Safari で初めてページを開いたときにスプラッシュスクリーン効果が表示される場合があることがわかりました。

次のコードを追加します:

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

スプラッシュスクリーン効果は表示されなくなります。

iframe を介したキャッシュを防止します

次のコードをページに追加します

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

このメソッドは検証する必要があります。

タイムスタンプによる強制更新メソッド

次のコードは、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();
    }
}

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 php中国語ウェブサイトで！