JS はブラウザページが更新されたか閉じられたかを区別します

JS はブラウザページが更新されたか閉じられたかを区別します_javascript スキル

WBOY

リリース： 2016-05-16 15:05:03

オリジナル

1731 人が閲覧しました

Web 開発者は、システム開発中にプロダクトマネージャーからさまざまな要求に直面することがよくあります。もちろん、それらのほとんどは、ページの更新、前後の移動、ラベル付け時のブラウザの終了など、製品エクスペリエンスに役立ちます。ユーザーの誤操作を避けるために、2 番目の確認プロンプトボックスを表示する必要があります。これは、ブラウザーが提供する BOM イベントメカニズムを使用するだけで解決できます。プロダクトマネージャーの場合、そのような要求だけを提起するのは理解できますが、それだけではありません...

たとえば、プロジェクト開発の 1 つで、プロダクトマネージャーが実装のための「改善計画」を提案しました。

あなたのポップアップボックスは醜すぎて、システム全体のスタイルと一致していません。独自のコンポーネントライブラリでダイアログを使用することはできませんか?とても良い質問です...私が言いたいのは、あなたは立ち上がることができます...

更新タブと閉じるタブに表示されるコピーは同じです。ユーザーがわかりやすくするために、更新プロンプトは XXX であり、SSS プロンプトは閉じるときに表示されます。まあ、ユーザーエクスペリエンスを考えると、これは非常に良いことだと私は言いたいのですが、頑張ってください...実際、ブラウザ自体は、閉じたときと更新したときの処理が異なりますが、カスタマイズされています。一部の部分では異なるコピーライティングを表示できません。もちろん、いくつかのハック方法はありますが、複数のブラウザに適応するのは難しく、タブを閉じたり更新したりする内部実装メカニズムはブラウザごとに異なります。

ログインするたびに、エージェントが電話システム (当社はカスタマーサービスシステムです) にログインするまでに 10 秒も待たなければならないのはなぜですか?この制限を解除してもらえませんか? ユーザーエクスペリエンスが悪すぎます。これも削除したいのですが、電話システムのチェックインとチェックアウトが頻繁に行われると、ユーザーがブラウザを更新して再度チェックインすると、その間隔が非常に短いと電話システムが誤動作してしまいます。この問題を回避するために、「この制限は克服されましたが、もう一度考えてみると、今日説明するトピックに入ることができます。

」を追加しました。

タブの更新と閉じるを区別する

ブラウザのイベントに基づいてタブを更新するか閉じるかを区別することはできず、対応するアクションがトリガーされる前に別のアクションを実行します。ただし、上記の製品で挙げられた 3 番目の点については、実際に最適化することを検討できます。更新時に 10 秒の遅延が発生します。タブを閉じた後、一定時間後にログインまたは再入力する場合には遅延はありません。

これを行うのは実際には非常に簡単です。Cookie や LocalStorage などのブラウザのローカルストレージメカニズムを使用できます。このセッションが終了するとキャッシュが無効になるため、SessionStorage は使用できません。 Cookie のバイト数を増やすと、各リクエストの対応するネットワーク送信量が増加します。そのため、使用するフロントエンドフレームワークは次のように AngularJS です。

上記のコードの主な機能は、システムに入った後、最初に LocalStorage に移動して最後に終了した時刻を取得し、次に現在の時刻を取得して、値がの場合は 2 つの時刻を減算することです。 10 秒未満の場合は更新であると考えられます。値が 10 秒を超える場合は、タブを閉じるか新しいログインであると考えられ、カスタマーサービスのエクスペリエンスを向上させるために別の方法を実行できます。電話システムにログインするたびに 10 秒待つ必要はありません。それでも非常に重要です。彼の質問がなかったら、私たちはこの場所を最適化できなかったかもしれません。もちろん、実際には。 , RD は、たとえ顧客サービスの効率を少しでも向上させることができたとしても、この種のユーザーエクスペリエンス第一の考え方を徐々に培わなければなりません。どの場所も時間をかけて最適化する価値があります。

const MAX_WAIT_TIME = 10;
const currentDate = new Date().getTime();
const lastestLeaveTime = parseInt(this.$window.localStorage.getItem('lastestLeaveTime'), 10) || currentDate;
this.secondCounter = Math.max(MAX_WAIT_TIME - Math.ceil((currentDate - lastestLeaveTime) / 1000), 0);
if (this.secondCounter > 0) {
this.logoutTimeInterval = this.$interval(()=> {
this.secondCounter--;
this.$scope.$digest();
}, 1000, this.secondCounter, false).then(() => {
this.updateByStatus(this.AvayaService.status.OFFLINE);
});
} else {
this.updateByStatus(this.AvayaService.status.OFFLINE);
}

ログイン後にコピー

以前に言及するのを忘れていた関連する終了コードを以下に投稿します。タブを更新するか閉じるかに関係なく、ページが破棄される限り、電話システムからログアウトする操作が実行されます。したがって、入るたびに再度チェックインする必要があります

また、いくつかの問題、つまり、ページを更新したり、閉じたり、転送したり、元に戻したりするには、ブラウザのデフォルトの 2 番目の確認ボックスから飛び出す必要があることに気づくかもしれませんが、ユーザーがシステムの終了ボタンをクリックすると、ダイアログが表示されなくなります。独自のコンポーネントライブラリがポップアップする必要があります。両方がポップアップすることはできません。具体的なコードは次のとおりです:

//刷新页面或者关闭页面
$window.onbeforeunload = () => {
return '操作将会导致页面数据清空，请谨慎操作...';
};
//每次页面unload时，设置LocalStorage时间；
$window.onunload = () => {
$window.localStorage.setItem('lastestLeaveTime', new Date().getTime());
};

ログイン後にコピー

上記はブラウザページが更新されたか閉じられたかを識別するために編集者が導入したJSの全内容です。皆さんの参考になれば幸いです。

onStatusClick(index, name) {
if (name === '退出') {
this.mgDialog.openConfirm({
showClose: false,
template: 'app/header/logoutDialog.html',
controller: 'HeaderDialogController as dialog',
data: {
'title': '您确定要退出系统吗？'
}
}).then(() => {
this.$window.location.href = '/logout';
this.$window.onbeforeunload = null;
});
} else {
// 内部操作，大家不用管
...
}
}

ログイン後にコピー