web-dev-qa-db-ja.com

jQuery / Javascriptを使用してページの更新を防止します

ユーザーがページにアクセスした後、ページを更新することは望ましくありません。

  1. いつでも、ユーザーがヒット F5 または上部の更新ボタン。彼は言ってアラートを取得する必要があります

    ページを更新することはできません。

  2. また、ユーザーが新しいタブを開き、前のタブの同じURLにアクセスしようとすると、アラートが表示されます

    2つのタブで同じページを開くことはできません

とにかくJavaScriptまたはjQueryを使用してこれを行うことができますか？ポイント1は本当に重要です。

javascriptjqueryrefresh
75
pankaj

＃1はwindow.onbeforeunloadを介して実装できます。

例えば：

<script type="text/javascript">
    window.onbeforeunload = function() {
        return "Dude, are you sure you want to leave? Think of the kittens!";
    }
</script>

ユーザーにはメッセージが表示され、ページにとどまるか続行するかを選択するオプションが表示されます。これはより一般的になっています。 Stack Overflowは、投稿の入力中にページから移動しようとするとこれを行います。ユーザーがリロードするのを完全に止めることはできませんが、もしそうなら本当に怖いように聞こえます。

＃2は多かれ少なかれ不可能です。セッションとユーザーログインを追跡したとしても、2番目のタブを正しく検出したことを保証することはできません。たとえば、1つのウィンドウを開いてから閉じます。今、私は新しいウィンドウを開きます。すでに最初のタブを閉じていたとしても、それを2番目のタブとして検出する可能性があります。これで、ユーザーは閉じたため最初のウィンドウにアクセスできなくなり、あなたが拒否しているために2番目のウィンドウにアクセスできなくなります。

実際、私の銀行のオンラインシステムは＃2を真剣に試みており、上記の状況は常に起こります。通常、銀行システムを再び使用するには、サーバー側のセッションが期限切れになるまで待つ必要があります。

162
Seth

ユーザーの更新を防ぐことはできません。また、実際に試してみるべきではありません。 whyに戻る必要があります。このソリューションが必要なのですが、根本的な問題は何ですか？そこから始めて、問題を解決するための別の方法を見つけてください。おそらく、これを行う必要があると思う理由について詳しく説明しているのでしょうか。

ブラウザの基本的な機能を壊すことは決して良い考えではありません。インターネットの99.999999999％以上が機能し、F5で更新されます。これはユーザーの期待です。

31
Nick Craver

昔のCGIでは、さまざまなバックエンドアクションをトリガーする多くのフォームがありました。グループへのテキスト通知、印刷ジョブ、データのファーミングなど。

ユーザーが「しばらくお待ちください...時間がかかる可能性のある巨大なジョブを実行しています。」と言っているページにいた場合。彼らはリフレッシュをヒットする可能性が高く、これは悪いでしょう！

どうして？それはより遅い仕事を引き起こし、最終的に全体を動かなくなるからです。

ソリューション？彼らにフォームを作成させます。彼らが彼らのフォームを提出するとき...あなたの仕事を始めて、彼らに待つように告げる別のページに彼らを向けてください。

中央のページには、ジョブを開始するために必要なフォームデータが実際に保持されていました。ただし、WAITページにはjavascript history destroyが含まれています。したがって、必要なすべての待機ページをリロードでき、元のジョブがバックグラウンドで開始することはありません。その待機ページには、待機自体に必要なフォームデータのみが含まれているためです。

それが理にかなっていることを願っています。

また、履歴破棄機能により、[戻る]をクリックしてから更新することもできなくなりました。

それは非常にシームレスで、非営利団体が倒産するまで何年もの間うまく機能しました。

例：フォームエントリ-すべての情報を収集し、送信されると、バックエンドジョブがトリガーされます。

フォームエントリからの応答-静的待機ページへのリダイレクトおよび/または別のフォーム（WAITページ）へのPOST/GETを実行するHTMLを返します。

待機ページ-待機ページに関連するFORMデータと、最新の履歴を破棄するJavaScriptのみが含まれます。 （-1 OR -2）と同様に、最新のページのみを破棄しますが、元のFORMエントリページに戻ることはできます。

待機ページに移動すると、必要に応じて[更新]をクリックでき、バックエンドで元のFORMジョブが生成されることはありません。代わりに、WAITページは、METAの時間指定された更新自体を使用して、ジョブのステータスを常に確認できるようにする必要があります。ジョブが完了すると、待機ページから任意の場所にリダイレクトされます。

手動で更新する場合...彼らは単にジョブのステータスのチェックをもう1つ追加するだけです。

それが役に立てば幸いです。幸運を。

13
Todd

F5キーを無効にすることはお勧めできませんが、以下のようにJQueryで実行できます。

<script type="text/javascript">
function disableF5(e) { if ((e.which || e.keyCode) == 116 || (e.which || e.keyCode) == 82) e.preventDefault(); };

$(document).ready(function(){
     $(document).on("keydown", disableF5);
});
</script>

これが役立つことを願っています！

13
Nilesh

いいえ、ありません。

JSからの更新ボタンのクリックをインターセプトする方法はないと確信しており、たとえあったとしてもJSをオフにすることができます。

おそらく Xから戻って（更新を防ぐ）、Yの別の解決策を見つけます（それが何であれ）

6
Quentin

番号（2）は、ユーザーが関与している各セッションのカスタムハートビートでソケット実装（websocket、socket.ioなど）を使用することで可能です。ユーザーが別のウィンドウを開こうとすると、javascriptハンドラーがチェックされますサーバーで問題がなければ、エラーメッセージで応答します。

ただし、Googleドキュメントのように、可能であれば2つのセッションを同期することをお勧めします。

2
seo

現在、問題＃2は BroadcastAPI を使用して解決できます。

現時点では、Chrome、Firefox、およびOperaでのみ利用可能です。

var bc = new BroadcastChannel('test_channel');

bc.onmessage = function (ev) { 
    if(ev.data && ev.data.url===window.location.href){
       alert('You cannot open the same page in 2 tabs');
    }
}

bc.postMessage(window.location.href);
1
RockLegend