web-dev-qa-db-ja.com

JavaScriptでページが再読み込みまたは更新されるかどうかを確認します

誰かがページを更新しようとしたときに確認したい。

たとえば、ページを開いても何も起こりませんが、ページを更新するとアラートが返されます。

javascriptrefresh
138
Ahmed

ページが実際にリロードされたことを確認するより良い方法は、最新のブラウザーのほとんどでサポートされているナビゲーターオブジェクトを使用することです。

Navigation Timing API を使用します。

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
  if (performance.navigation.type == 1) {
    console.info( "This page is reloaded" );
  } else {
    console.info( "This page is not reloaded");
  }

ソース： https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

179
Rahul Jain

最初のステップは、事前定義された値について sessionStorage をチェックし、存在する場合はユーザーに警告することです。

if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');

2番目のステップは、 sessionStorage を何らかの値に設定することです（たとえば、true）：

sessionStorage.setItem("is_reloaded", true);

セッション値はページが閉じられるまで保持されるため、ページがサイトの新しいタブにリロードされた場合にのみ機能します。リロードカウントを同じ方法で保持することもできます。

39
DitherSky

誰かがページに初めてアクセスしたときにCookieを保存します。更新時に、Cookieが存在するかどうかを確認し、存在する場合は警告します。

function checkFirstVisit() {
  if(document.cookie.indexOf('mycookie')==-1) {
    // cookie doesn't exist, create it now
    document.cookie = 'mycookie=1';
  }
  else {
    // not first visit, so alert
    alert('You refreshed!');
  }
}

そしてあなたのボディタグで：

<body onload="checkFirstVisit()">
16
techfoobar

新しい標準2018、2019（PerformanceNavigationTiming）

window.performance.navigationプロパティは、 Navigation Timing Level 2 仕様ではdeprecatedです。代わりに PerformanceNavigationTiming インターフェイスを使用してください。

PerformanceNavigationTiming.type

これは 実験技術 です。

これを実稼働環境で使用する前に、 ブラウザ互換性テーブル を注意深く確認してください。

14.11.2018のサポート：

Type読み取り専用プロパティは、ナビゲーションのタイプを表す文字列を返します。値は次のいずれかでなければなりません。

  • navigate—ナビゲーションは、リンクをクリックするか、ブラウザのアドレスバーにURLを入力するか、フォームを送信するか、reloadおよびback_forward以外のスクリプト操作で初期化することで開始します以下にリストされています。

  • reload—ナビゲーションはブラウザのリロード操作または location.reload() を使用します。

  • back_forward—ナビゲーションは、ブラウザの履歴トラバーサル操作を介して行われます。

  • prerender—ナビゲーションは prerenderヒント によって開始されます。

このプロパティは読み取り専用です。

次の例は、このプロパティの使用法を示しています。

function print_nav_timing_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i=0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.interactive);

    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));

    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}
15
Илья Зеленько

ここでいくつかの情報を見つけました Javascript Detecting Page Refresh 。彼の最初の推奨事項は、ページの更新を通じて保存される傾向がある隠しフィールドの使用です。

function checkRefresh() {
    if (document.refreshForm.visited.value == "") {
        // This is a fresh page load
        document.refreshForm.visited.value = "1";
        // You may want to add code here special for
        // fresh page loads
    } else {
        // This is a page refresh
        // Insert code here representing what to do on
        // a refresh
    }
}
<html>

<body onLoad="JavaScript:checkRefresh();">
    <form name="refreshForm">
        <input type="hidden" name="visited" value="" />
    </form>

</body>

</html>
7
VoronoiPotato

もし

event.currentTarget.performance.navigation.type

返す

0 => URLを入力したばかりのユーザー
1 =>ページの再読み込み
2 =>戻るボタンがクリックされました。

6
nPcomp

ここでいくつかの情報を見つけましたJavascript Detecting Page Refresh

function UnLoadWindow() {
    return 'We strongly recommends NOT closing this window yet.'
}

window.onbeforeunload = UnLoadWindow;
2
Manpreet

古いwindow.performance.navigationと新しいperformance.getEntriesByType("navigation")を使用して両方のメソッドを同時にチェックするために、この関数を作成しました。

function navigationType(){

    var result;
    var p;

    if (window.performance.navigation) {
        result=window.performance.navigation;
        if (result==255){result=4} // 4 is my invention!
    }

    if (window.performance.getEntriesByType("navigation")){
       p=window.performance.getEntriesByType("navigation")[0].type;

       if (p=='navigate'){result=0}
       if (p=='reload'){result=1}
       if (p=='back_forward'){result=2}
       if (p=='prerender'){result=3} //3 is my invention!
    }
    return result;
}

結果の説明：

：リンクのクリック、ブラウザのアドレスバーへのURLの入力、フォームの送信、ブックマークのクリック、スクリプト操作による初期化。

1： [再読み込み]ボタンをクリックするか、Location.reload()を使用します

2：ブラウザの履歴の操作（BakcおよびForward）。

：<link rel="prerender" href="//example.com/next-page.html">のような事前レンダリングアクティビティ

4：その他の方法。

1
Ali Sheikhpour