186

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

たとえば、ページを開いても何も起こりませんが、ページを更新すると警告が表示されます。

javascript page-refresh

— アーメド
ソース

1

サーバー側のコードなしでは実際には不可能です。何のために必要ですか？多分あなたがより大きな絵を与えるなら、私たちはより良い代替案を提案することができます。

— Shadow WizardはEar For You

たぶん、あなたはクッキーでそれをすることができるかもしれません...時間を保存し、リロード時に時間差を比較するようなものです。

— Felix Kling、2011

フェイスブックのリンクは＃！/ anythinge削除したい＃！などにしたいです。ページのリロード時のみ

— アーメド

1

@Ahmed私も同じことをしようとしています。以下の解決策のいずれかが役立ちましたか？

— ポールフィッツジェラルド

3

⚠️⚠️⚠️ window.performance.navigation.typeは非推奨です。pls は私の回答を参照してください。

— ИльяЗеленько

221

⚠️⚠️⚠️is window.performance.navigation.typedeprecated、pls seeИльяЗеленько's answer

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

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

— ラフルジェイン
ソース

1

バディに感謝します。これは、ページがブラウザから右クリック/更新によってリロードされたか、URLによってリロードされたかを検出するための正確なソリューションです。

— Roque Mejos 16

4

注意：Chromeは最近この動作を変更しました。ユーザーが現在のアドレスバーをクリックしてEnterキーを押すと、performance.navigation.typeの値は1になり、0になるはずです。バージョン56でテストしました。理由は不明です。

— ジャックウィン・タン

1

彼らがそれが機能する方法は期待通りであり、新しいナビゲーション状態を同じページに強制するページとの相互作用はリフレッシュと見なされます。そのため、コードによっては、ページが更新または再読み込みされるたびに登録するか、ajaxインタラクションのいずれかを登録するのに非常に便利です。私はこれに機能性と分析の多くの用途を与えることができます。

— raphie 2017

27

performance.navigation.type == performance.navigation.TYPE_RELOAD の代わりに読みやすいです == 1。また、あなたがチェックするとperformance.navigation次のような4つの切り抜いたナビゲーション種類があることがわかりますTYPE_BACK_FORWARD、TYPE_NAVIGATE

— Vitalij Kornijenkoは

5

⚠️⚠️⚠️ window.performance.navigation.typeは非推奨です。pls は私の回答を参照してください。

— ИльяЗеленько

37

最初のステップは、sessionStorage事前に定義された値を確認し、それが存在するかどうかをユーザーに警告することです。

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

2番目のステップは、sessionStorageある値（たとえばtrue）に設定することです。

sessionStorage.setItem("is_reloaded", true);

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

— ディザスカイ
ソース

28

注意すべき2つのこと：1）。文字列値は、セッションおよびローカルストレージにのみ保存できます。したがってtrue、に変換され"true"ます。2）。セッションストレージは、ユーザーがブラウザウィンドウを閉じるまで存続するため、ページのリロードと、同じブラウザセッション内でのサイトからの移動とサイトへの移動の違いを見分けることはできません。

— ヘクター

35

新しい標準2018-今（PerformanceNavigationTiming）

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

PerformanceNavigationTiming.type

これは実験的な技術です。

ブラウザの互換性表を確認してくださいこれを本番環境で使用する前に注意深く。

2019-07-08のサポート

タイプの読み取り専用プロパティは、ナビゲーションのタイプを表す文字列を返します。値は次のいずれかである必要があります。

ナビゲート —ナビゲーションは、リンクをクリックするか、ブラウザーのアドレスバーに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);
  }
}

— ИльяЗеленько
ソース

4

廃止予定のAPIを指摘する場合は+ 1、iOSでのサポートの欠如については2020年までAppleに-100

— kinakuta

14

誰かが初めてページにアクセスしたときに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()">

— techfoobar
ソース

9

リピーターはどうですか？

— Red Taz

5

@ Rob2211のように、これはページがアクセスされたかどうかをチェックするだけであり、Cookieがまだ有効なときにページが再訪問される限り、誤検知を与える可能性があると述べています。これを使用して更新を確認しないでください。

— ブラノン2013

@Brannon-Cookieは有効期限値なしで作成され、ブラウザーが閉じられると破棄されます。

— techfoobar 2013

1

@techfoobarいいキャッチ。そのCookieが破棄される前にユーザーがサイトに再度アクセスした場合でも、これは問題を引き起こしませんか？

— ブラノン2013

3

@Brannon-はい、ブラウザを開いたままにして、しばらくしてからユーザーが再度アクセスした場合、新しい訪問とは見なされません。

— techfoobar 2013

7

もし

event.currentTarget.performance.navigation.type

戻り値

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

— nPcomp
ソース

このエラーが発生しました。詳しく説明できますか？Uncaught TypeError：undefinedのプロパティ 'currentTarget'を読み取れません

— Janatbek Sharsheyev

2 => TYPE_BACK_FORWARD履歴に移動してページにアクセスしました。 developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

— Tiago Freitas Leal

performance.navigation.type廃止予定です。plsが私の回答を参照してください。

— ИльяЗеленько

6

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>

スニペットを展開

— ボロノイポテト
ソース

Refererプロパティをチェックしてチェックし、このプロパティに基づいてサーバーの応答を変更することもできます

— Adeel

補足：DOMが解析される前にコードが実行されているため、そのページにリストされている最初のメソッドは失敗します。<script>要素を一番下に移動しても機能しますが、それでも保証された解決策ではありません（Cookieメソッドも同様です）。

— アンディE

1

@Adeel：チェックRefererも信頼できません。多くのプロキシとブラウザ拡張機能は、リクエストからそれを取り除きます。

— アンディE

@VoronoiPotatoリンクを投稿するだけでなく、情報をまとめてみてください。

— ダリン

1

私にとっては、それは常に「if」条件を実行し、「else」部分は決して実行しません。ページのロードまたはページの更新を行ったかどうかは関係ありません。

— Parth Vora 2016

6

私は古いもの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;
}

結果の説明：

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

1： [リロード]ボタンをクリックするか、Location.reload()

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

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

4：その他の方法。

— アリ・シェイクプール
ソース

1

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

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

window.onbeforeunload = UnLoadWindow;

— マンプリート
ソース

3

「ここ」はどこ？リンクを忘れましたか？

— ᴄʀᴏᴢᴇᴛ

0

if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}

— アレクシス・ガトゥイング
ソース

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

新しい標準2018-今（PerformanceNavigationTiming）

PerformanceNavigationTiming.type

2019-07-08のサポート

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