JS distingue si la page du navigateur est actualisée ou fermée_javascript

Les développeurs Web sont souvent confrontés à diverses demandes de la part des chefs de produit lors du développement du système. Bien sûr, la plupart d'entre elles sont utiles pour l'expérience du produit, comme actualiser la page, avancer et reculer et fermer le navigateur que nous avons mentionné aujourd'hui. afin d'éviter une mauvaise opération de l'utilisateur, une boîte de dialogue de confirmation secondaire doit être fournie. Je pense que tout le monde le sait très bien. Cela peut être résolu en utilisant le mécanisme d'événement BOM fourni par le navigateur. Utilisez simplement l'événement onbeforeunload de l'objet window. . Si le chef de produit Il est compréhensible de n'élever que de telles exigences, mais cela nécessite plus que celles-là...

Par exemple, lors d'un de nos développements de projet, le chef de produit a proposé un "plan d'amélioration" pour notre mise en œuvre :

Votre boîte de dialogue est trop moche et ne correspond pas au style général du système. Ne pouvons-nous pas utiliser le Dialog dans notre propre bibliothèque de composants ? Très bonne question... Je veux juste dire, tu peux te lever...

La copie affichée dans vos onglets d'actualisation et de fermeture est la même. Ils doivent être traités différemment. L'invite d'actualisation est XXX et l'invite SSS est invitée lors de la fermeture, afin que les utilisateurs puissent être plus clairs. Eh bien, compte tenu de l'expérience utilisateur, c'est très bien. Je tiens quand même à dire, vous pouvez vous lever... En fait, le navigateur lui-même l'a traité différemment lorsqu'il est fermé et actualisé. Les invites sont différentes, mais nous les avons personnalisées. Certaines parties ne peuvent pas afficher une rédaction différente ; bien sûr, il existe des méthodes de piratage, mais il est difficile de s'adapter à plusieurs navigateurs, et le mécanisme de mise en œuvre interne de la fermeture des onglets et de l'actualisation sera différent dans chaque navigateur

Chaque fois que vous vous connectez, pourquoi devez-vous attendre 10 secondes avant de laisser l'agent se connecter au système téléphonique (nous sommes un système de service client) ? Pouvez-vous supprimer cette restriction ? L'expérience utilisateur est si mauvaise ! Nous souhaitons également le supprimer, mais les enregistrements et retraits fréquents du système téléphonique entraîneront des problèmes. Si l'utilisateur actualise le navigateur et s'enregistre à nouveau, si l'intervalle est très court, le système téléphonique ne fonctionnera pas correctement. pour éviter ce problème, nous avons ajouté Nous avons surmonté cette limitation, mais si nous y réfléchissons à nouveau, nous pouvons entrer dans le sujet dont nous avons discuté aujourd'hui

Distinguer les onglets d'actualisation et de fermeture

Nous ne pouvons pas faire la distinction entre l'actualisation ou la fermeture des onglets en fonction des événements du navigateur, puis effectuer différentes actions avant que l'action correspondante ne soit déclenchée. Cependant, concernant le troisième point soulevé par le produit ci-dessus, nous pouvons effectivement envisager de l'optimiser, c'est-à-dire. seulement Il y a un délai de 10 secondes lors de l'actualisation. Il n'y aura aucun délai lors de la reconnexion ou après la fermeture de l'onglet pendant un certain temps

C'est en fait très simple de faire cela. Vous pouvez utiliser le mécanisme de stockage local du navigateur, tel que les cookies, LocalStorage, etc. SessionStorage ne peut pas être utilisé ici car le cache sera invalide après la fin de cette session, car le stockage dans les cookies le sera ; augmentez le nombre d'octets du cookie, le volume de transmission réseau correspondant à chaque requête augmentera donc, nous utilisons LocalStorage ; son fonctionnement est très simple. Le framework front-end que nous utilisons est AngularJS, comme suit :

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);
}

La fonction principale du code ci-dessus est qu'après être entré dans le système, il ira d'abord à LocalStorage pour obtenir l'heure de sa dernière sortie, puis obtiendra l'heure actuelle et soustraira les deux fois si la valeur est. moins de 10 secondes, nous pensons qu'il s'agit d'une actualisation. Si la valeur est supérieure à 10 secondes, nous pensons qu'il s'agit d'un onglet fermé ou d'une nouvelle connexion, et nous pouvons alors appliquer différentes méthodes pour offrir au service client une meilleure expérience. Je n'ai pas besoin d'attendre 10 secondes à chaque fois pour me connecter au système téléphonique. C'est quand même très important, Hoho. Sans ses questions, nous n'aurions peut-être pas optimisé cet endroit... Bien sûr, en fait. , RD doit progressivement cultiver ce type d'expérience utilisateur en pensant d'abord, même si cela peut améliorer un peu l'efficacité du service client. Chaque endroit vaut la peine d'être optimisé

Permettez-moi de publier le code de sortie correspondant ci-dessous. J'ai oublié de le mentionner auparavant. Peu importe qu'il s'agisse d'un rafraîchissement ou de la fermeture de l'onglet, tant que la page est détruite, nous effectuerons l'opération de déconnexion du système téléphonique, donc chaque fois que nous entrons, nous devons nous enregistrer à nouveau

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

Nous pouvons également remarquer certains problèmes, c'est-à-dire l'actualisation, la fermeture de la page, le transfert et le retour en arrière, vous devez sortir de la boîte de confirmation secondaire par défaut du navigateur, mais lorsque l'utilisateur clique sur le bouton de sortie du système, la boîte de dialogue dans son votre propre bibliothèque de composants doit apparaître. Les deux ne doivent pas apparaître. Le code spécifique est le suivant :

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 {
// 内部操作，大家不用管
...
}
}

Ce qui précède est l'intégralité du contenu du JS introduit par l'éditeur pour distinguer si la page du navigateur est actualisée ou fermée. J'espère que cela sera utile à tout le monde !