ブラウザの更新ボタンが押下されたことを判別したい

Question

###実現したいこと
とあるwebサイトの管理画面を開発しており、下記条件でログを出力する処理を作成しています。

・ブラウザ、若しくはページが閉じられた場合→ログを出力
・該当ページから外部Webサイトへ遷移した場合→ログを出力
(管理画面内に外部webサイトへのリンクは存在しない為ブックマーク等での遷移を想定)
・ページ内aタグやsubmitでの画面遷移→ログ出力しない
・ブラウザの更新ボタンやF5押下時→ログ出力しない

###現在の状況

jQueryのbeforeunloadで実装しようとしたのですが、aタグやsubmitはclickイベント等で判別出来てもブラウザによるページ更新の判別方法が分かりません。

解決方法・若しくは代替案等ありましたらご教授下さい。

*2016/8/16
新しいタブ等で開いた場合はbeforeunloadをoffにしない処理を追記しました

$(function(){
    $(window).on('beforeunload', function() {
        //ログ出力処理
    });

    $("form").submit(function() {
        $(window).off("beforeunload");
    });


    $("a").click(function(event) {
        var button = event.button;
        if (!event.which && button !== undefined) {
            event.which = (button & 1 ? 1 : (button & 2 ? 3 : (button & 4 ? 2 : 0)));
        }

        // 新しいタブ・ウィンドウで開いた場合は無視する
        if (!((event.button !== 0 && event.which !== 1) || event.altKey || event.ctrlKey || event.shiftKey || event.metaKey)) {
            $(window).off("beforeunload");
        }
    });
});

####システムでの使用言語
cakePHP
HTML
javascript

Answer 1

自分のサイト内の移動であれば、HTML5のHISTORY APIである程度まではできると思いますが、外部のサイトへの移動などを判別するのは難しいかもしれませんね。

Comments

[newcre]

ご回答ありがとうございます。
外部サイトへの遷移に関しては、管理画面の仕様上比較的特定が容易ですので問題無いのですが、画面更新を判断することが出来ておりません。
やはりクライアント側で更新・クローズ・遷移を全て区別するのは無理なのでしょうか・・・

Answer 2

[更新], [閉じる], [ページ遷移] を区別する方法はないと思います。
この手の区別が出来るとユーザの動きをかなりの部分でコートロール可能となる為だと思われます。
(例えば、ページの [更新], [閉じる] を阻害する事が可能です。
今でも一部で unload で阻害しているページが見られますが、更に細かく嫌がらせ出来るようになります。)

おそらく目的はページ離脱時を特定する事にあると想像します。
代替案としてはGoolgleアナリティクスと同じ要領でユーザのページ遷移履歴を記録して最後にアクセスしたページで離脱したと判断する方法があります。
クライアント側でアクセス解析をするのには限界があります。

Re: newcre さん

Comments

[newcre]

ご回答ありがとうございます。
やはりクライアント側で全てコントロールするのは難しいのですね・・・。
googleアナリティクスに詳しくないのですが、サーバサイドで(私の場合であればcakePHP側で)判別するしかない、という認識で間違いないでしょうか？

[think49]

> サーバサイドで(私の場合であればcakePHP側で)判別するしかない、という認識で間違いないでしょうか？
この質問に「間違いない」と答えられる人はそれ程、いないと思います。
サーバサイド、クライアントサイド全ての技術に精通しており、「自分の知らない技術が絶対にない」と確信を持てる人でなければなりません。
私はそこまでの知識を有しているとは思っていませんので「私の知る範囲ではそうです」としか回答できません。
ご期待に添えず、すみません。

[newcre]

こちらでも出来る限り調べてみたのですが、やはりthink49さんの仰る通りクライアントサイドでの判断は難しいようです。
最終的に更新を含めてログ出力し、その後バッチ等でログを整理する方向に落ち着きました。
分かりやすい説明と代替案のご提供を頂きありがとうございました。

Answer 3

ページを移動するときに警告を出す方法とは違いますか？

Comments

[newcre]

ご回答ありがとうございます。
上記コードにも記載しております通り、beforeunloadの実装そのものとsubmit及び<a>での遷移時は処理を行わない、という部分までは実装出来ております。
後はブラウザの更新ボタン・F5ボタンでの画面更新さえ判別出来れば問題ないのですが、調べてもその様なイベント等が見当たりませんでしたので質問させて頂いた次第です。

[Zuishin]

いや、紹介したページで試してみてください。できていませんか？

[guest1213]

リンク先で再読み込み等でアラートの文言が変化するのは、ブラウザの仕様なだけです。
JavaScriptからその情報を知るすべはないと思います。

[newcre]

私の書き方が分かりにくく誤解させてしまったようで申し訳ないです。
更新ボタンやF5での遷移でbeforeunloadが反応してしまっては困るのです。
紹介して頂いたページのコードには画面更新時のダイアログ表示を除外する処理は入っていないように見受けられます。

[Zuishin]

まだ質問の意図が伝わらず聞いてる段階でマイナスつけるのはやめてもらえますかね？

Answer 4

var flag = true;
document.body.addEventListener("mouseleave", function (e) {
  flag = false;
});
document.body.addEventListener("mouseenter", function (e) {
  flag = true;
});
window.addEventListener("keypress", function (e) {
  if ( e.keyCode == 116 ) flag = false;
});
window.addEventListener("beforeunload", function (e) {
  console.log( flag );
  var dialogText = 'Dialog text here';
  e.returnValue = dialogText;
  return dialogText;
});

こんなコードを試したみたところ、F5更新や更新ボタンクリックの時にはflagがfalseとなりました。
いろいろ粗があると思いますが……

Comments

[newcre]

ご回答ありがとうございます。
頂いたコードを基にこちらで色々試しましたが、mouseleaveでは更新ボタンだけでなくタブを閉じるボタン、ブラウザを閉じるボタンやブックマークでの画面遷移等ブラウザ機能による操作全てに対して処理を行ってしまう為、期待の挙動は得られませんでした。
F5ボタンはkeydownで処理すればよかったのですね・・・完全に失念しておりました。
ありがとうございました。

[Lhankor_Mhy]

ああ、なるほど、そちらとも区別するのですね。それは失礼しました。うーん……