プロジェクトのニーズ: インターネット上でも類似の記事をたくさん見つけましたが、それらを使用するにはいくつか問題があります。結局のところ、自分のニーズに合うようにする必要があります。ここでは vue3 を使用していますが、理論的には vue2 も使用できます。私が書いた方法は普遍的です。 これらのメソッドはすべて、 1. beforeunload イベント1.1、初心者向けチュートリアル: 1.2、MDN 2. アンロードイベント2.1、初心者向けチュートリアル 2.2、MDN
使用したソースコードは以下に掲載しています。 3. ソースコード3.1. 方法1: HTMLページに記述できる(直接使用) var _beforeUnload_time = 0、_gap_time = 0; window.onunload = 関数 (){ _gap_time = 新しい Date().getTime() - _beforeUnload_time; if(_gap_time <= 10){//ブラウザを閉じる window.mgr.signoutRedirect();//このmgrはwindowで公開したログアウトメソッドです}else{//ブラウザを更新 - chrome refresh console.log(document.domain); return confirm("このシステムを終了してもよろしいですか?"); } }; window.onbeforeunload = 関数 (){ _beforeUnload_time = 新しいDate().getTime(); }; 3.2. 方法2: データ() { 戻る { ギャップ時間: 0, アンロード前時間: 0, }; }, メソッド: { //ウィンドウを閉じる前に実行する beforeunloadHandler() { this.beforeUnload_time = 新しい Date().getTime(); }, アンロードハンドラ() { this.gap_time = 新しい Date().getTime() - this.beforeUnload_time; //ウィンドウが閉じられたか更新されたかをミリ秒単位で判断します。オンラインの読み取りのほとんどは5です。 (this.gap_time <= 10)の場合{ mgr.signoutRedirect(); // ログアウトインターフェースは個人用ログアウトメソッドに置き換える必要があります} else { console.log(ドキュメント.ドメイン); return confirm("このシステムを終了してもよろしいですか?"); } }, }, unmounted(){//vue は destroyed() ライフサイクルに置き換えることができますが、これも使用できます // リスナーを削除します window.removeEventListener("beforeunload", () => this.beforeunloadHandler()); window.removeEventListener("unload", () => this.unloadHandler()); }, マウント() { // ブラウザの終了をリッスンします。window.addEventListener("beforeunload", () => this.beforeunloadHandler()); window.addEventListener("unload", () => this.unloadHandler()); }, 参考記事: これで、vue でのブラウザの終了とログアウトの実装に関するこの記事は終了です。より関連性の高い vue のブラウザの終了とログアウトのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS スタイルにおける中国語フォントのフォントファミリーに対応する英語名の詳細な説明
>>: MySQLデータベースのマスタースレーブレプリケーションの原理と機能の分析
目次MySQLネイティブレプリケーションに基づくマスター-マスター同期ソリューションGaleraレプ...
目次1. シーンの読み込み2. ノードを見つける1. ノード検索2. その他のノード操作3. 再生ア...
最初は、複数の列のコンテンツのサイズと高さが異なります。ここで、表示する背景を異なるものに設定し、各...
エラー発生: MySQL 5.7 から SQL にデータベースをエクスポートし、それを MySQL ...
clip-path CSS プロパティはクリッピングを使用して要素の表示可能領域を作成します。領域内...
車輪の再発明として、ここでは再パッケージ化を使用して Docker ベースの Hadoop イメージ...
目次1. 必須属性1. 名前2. バージョン2. 説明情報1. 説明2. キーワード3. 著者4. ...
序文以前、ある会社の面接に行ったとき、面接官から「オブジェクトを深くコピーするにはどうすればよいです...
この記事の例では、両端キューを実装するためのJavaScriptの具体的なコードを参考までに共有して...
1. ダウンロード1. MySQL公式サイトのダウンロードアドレス: https://downloa...
MySQL データベースの実行効率はプログラムの実行速度に大きな影響を与えます。データベースの効率的...
1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...
目次1. 需要2. データベース設計3.Javaバックグラウンド構成の実装4. WeChatアプレッ...
目次背景分析するデータシミュレーション1. 従業員テーブルと部門テーブルの2つのテーブルを作成します...
[LeetCode] 181.従業員の収入が管理職よりも多い従業員テーブルには、マネージャーを含む...