web-dev-qa-db-ja.com

ページが戻るボタンから読み込まれているかどうかを検出する

現在のページが戻るボタンから来たかどうかを検出する方法はありますか？

現在のページが戻るボタンから来た場合にのみ、Cookieからデータをロードしたい。

javascriptinternet-explorerfirefox
22
Valter

ユーザーがページに戻ると、表示されているフォームデータは保持されますが、JavaScript変数はリセットされます。非表示のフィールドは保持されないようですが、非表示の入力は保持されるので、「表示可能な」フォームデータと言います。

これを利用して、ページが最初の読み込みであったか、または[戻る]ボタンのクリックなどで以前に既に読み込まれていたかを検出できます。

値が「0」の非表示の入力フィールド（タイプ「hidden」ではない）を作成し、DOMレディーローダー内で値が「1」に設定されているかどうかを確認します。戻るボタンなどからページが既に読み込まれていることがわかっている場合。それでも「0」の場合、ページは最初にロードされたので、値を「1」に設定します。

注：これは動作が少し微妙で、おそらくすべてのブラウザーで動作するとは限りません。 Chrome=を念頭に置いて作成しました。

  • DOMをロードする必要があります。すべてのレディ機能が機能するわけではありません。以下のものは、JQueryの準備ができているので、そうです。ただし、私のインスタンスでは（function（）{}）はしません。
  • 入力をtype = "hidden"にすることはできません。 style = "display：none;"を設定します代わりに入力で。

。

<input id="backbuttonstate" type="text" value="0" style="display:none;" />
<script>
document.addEventListener('DOMContentLoaded', function () {
   var ibackbutton = document.getElementById("backbuttonstate");
   if (ibackbutton.value == "0") {
     // Page has been loaded for the first time - Set marker
     ibackbutton.value = "1";
     alert('First time load');
   } else {
     // Back button has been fired.. Do Something different..
     alert('Previously loaded - Returned from Back button');
   }
}, false);
</script>
19
Radderz

より簡単なチェックのために、 Navigation Timing API Spec （すでに非推奨ですが、広くサポートされています）と Navigation Timing Level 2 API Spec （作業中のドラフト、主要ブラウザーでサポートされています）

if (window.performance) {
     var navEntries = window.performance.getEntriesByType('navigation');
     if (navEntries.length > 0 && navEntries[0].type === 'back_forward') {
          console.log('As per API lv2, this page is load from back/forward');
     } else if (window.performance.navigation
          && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
          console.log('As per API lv1, this page is load from back/forward');
     } else {
          console.log('This is normal page load');
     }
} else {
     console.log("Unfortunately, your browser doesn't support this API");
}
10
Montri M
 if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
        $('.formName').get(0).reset();
    }
5
user3793702

プロジェクト内のページを操作している場合、これは sessionStorage で実行できると思います（これは外部ページを考慮していません）。私の頭の上の「メインページ」にいるとき、リンクをクリックして次のページに移動します。

次のページでは、sessionStorageに次のような値を設定できます。

sessionStorage.setItem('doSomething', 'yes');

次に、メインページに戻ると、次のような状態になります。

const sCheckSession = sessionStorage.getItem('doSomething');
if(sCheckSession == 'yes') {
  // do something crazy, then reset your reference to no
  // so it wont interfere with anything else
  sessionStorage.setItem('doSomething', 'no');
}
2
UXCODA

Pageshowイベントを使用して、戻るまたは進むボタンを検出します。

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        Alert("User clicked on back button!");
    }
});

詳細については、 here のpageshowイベントを確認してください。

1
Yusef

基本的には、ブラウザの制限によりできません。 HTML5履歴API。バックページに移動するとonpopstateイベントがトリガーされます。しかし、アプリケーションナビゲーションを使用していても、これは発生します。

代替ソリューションの参照- ブラウザの戻るボタンイベントを検出する方法-クロスブラウザ

0
Anand Itagi