jQuery / Javascriptを使用してフォームの更新を防止する

ユーザーが自分のページにアクセスしたら、ユーザーにページを更新させたくありません。

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

   ページを更新できません。

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

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

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

＃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に真剣に取り組んでおり、上記の状況は常に発生しています。私は通常、銀行システムを再び使用する前に、サーバー側のセッションが期限切れになるまで待たなければなりません。

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

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

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>

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

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

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

どうして？それはより遅いジョブをトリガーし、最終的にはすべてを妨げてしまうからです。

ソリューション？彼らに彼らの形をさせる。彼らがフォームを送信したら...ジョブを開始してから、待機するように指示する別のページに誘導します。

真ん中のページが、ジョブを開始するために必要なフォームデータを実際に保持していた場所。ただし、WAITページにはJavaScriptの履歴破棄が含まれています。そのため、待機ページは必要なだけRELOADでき、WAITページにはWAIT自体に必要なフォームデータのみが含まれているため、元のジョブがバックグラウンドで開始されることはありません。

それが理にかなっていると思います。

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

それは非常にシームレスで、非営利団体が解雇されるまでの何年にもわたって優れた働きをしました。

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

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

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

ユーザーがWAITページに移動すると、必要に応じてREFRESHをクリックでき、バックエンドで元のFORMジョブを生成することはありません。代わりに、WAITページはMETA時限更新自体を採用する必要があるため、ジョブのステータスを常に確認できます。彼らの仕事が完了すると、彼らはあなたが望むどこにでも待機ページから離れてリダイレクトされます。

手動でREFRESHを実行する場合...ジョブのステータスのチェックを1つ追加するだけです。

お役に立てば幸いです。幸運を。

いいえ、ありません。

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

おそらく、Xから離れて（更新を防止して）、Yの別の解決策を見つける必要があります（それが何であれ）。

数値（2）は、ユーザーが従事しているセッションごとにカスタムハートビートを使用したソケット実装（websocket、socket.ioなど）を使用することで可能になります。ユーザーが別のウィンドウを開こうとすると、JavaScriptハンドラーチェックが行われます。問題がない場合はサーバーで確認し、エラーメッセージで応答します。

ただし、より良い解決策は、Googleドキュメントのように、可能であれば2つのセッションを同期させることです。

BroadcastAPIを使用して問題＃2を解決できるようになりました。

現在、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);