JS unterscheidet, ob die Browserseite aktualisiert oder geschlossen ist. Javascript-Kenntnisse

Webentwickler sehen sich während der Systementwicklung häufig mit verschiedenen Anforderungen von Produktmanagern konfrontiert. Die meisten davon sind natürlich hilfreich für die Produkterfahrung, wie z. B. das Aktualisieren der Seite, das Vor- und Zurückblättern und das Schließen des Browsers, den wir heute erwähnt haben. Um Fehlbedienungen durch den Benutzer zu vermeiden, muss meiner Meinung nach jeder damit vertraut sein. Dies kann mithilfe des vom Browser bereitgestellten BOM-Ereignismechanismus gelöst werden . Wenn der Produktmanager nur solche Forderungen stellt, braucht es doch mehr als nur diese...

Zum Beispiel schlug der Produktmanager während einer unserer Projektentwicklungen einen „Verbesserungsplan“ für unsere Umsetzung vor:

Ihre Popup-Box ist zu hässlich und passt nicht zum Gesamtstil des Systems. Können wir den Dialog nicht in unserer eigenen Komponentenbibliothek verwenden? Sehr gute Frage ... Ich möchte nur sagen, können Sie aufstehen ...

Die in Ihren Registerkarten „Aktualisieren“ und „Schließen“ angezeigten Kopien müssen unterschiedlich behandelt werden. Die Aktualisierungsaufforderung lautet XXX und die SSS-Eingabeaufforderung wird beim Schließen abgefragt, damit Benutzer klarer sind. Nun, in Anbetracht der Benutzererfahrung möchte ich immer noch sagen, dass der Browser selbst es anders behandelt hat, wenn er geschlossen und aktualisiert wurde, aber wir haben ihn angepasst Einige Teile können natürlich keine unterschiedlichen Copywriting-Methoden anzeigen, aber es ist schwierig, sie an mehrere Browser anzupassen, und der interne Implementierungsmechanismus zum Schließen von Tabs und zum Aktualisieren ist in jedem Browser unterschiedlich

Warum müssen Sie jedes Mal, wenn Sie sich anmelden, 10 Sekunden warten, bevor sich der Agent beim Telefonsystem anmelden kann (wir sind ein Kundendienstsystem)? Können Sie diese Einschränkung aufheben? Die Benutzererfahrung ist so schlecht! Wir möchten es auch entfernen, aber das häufige Ein- und Auschecken des Telefonsystems führt zu Problemen. Wenn der Benutzer den Browser aktualisiert und erneut eincheckt, kommt es zu einer Fehlfunktion des Telefonsystems Um dieses Problem zu vermeiden, haben wir hinzugefügt: Wir haben diese Einschränkung überwunden, aber wenn wir noch einmal darüber nachdenken, können wir uns dem Thema widmen, das wir heute besprochen haben

Unterscheiden Sie zwischen aktualisierenden und schließenden Tabs Wir können nicht zwischen dem Aktualisieren oder Schließen von Tabs basierend auf Browserereignissen unterscheiden und dann verschiedene Aktionen ausführen, bevor die entsprechende Aktion ausgelöst wird. Was den dritten Punkt betrifft, der durch das oben genannte Produkt angesprochen wird, können wir jedoch tatsächlich darüber nachdenken, ihn zu optimieren, d. h. Nur beim Aktualisieren kommt es zu einer Verzögerung von 10 Sekunden. Es gibt keine Verzögerung, wenn Sie sich erneut anmelden oder den Tab für eine Weile schließen

Dies ist eigentlich sehr einfach. Sie können den lokalen Speichermechanismus des Browsers verwenden, z. B. Cookies, LocalStorage usw. SessionStorage kann hier nicht verwendet werden, da der Cache nach dem Ende dieser Sitzung ungültig wird Erhöhen Sie die Anzahl der Bytes des Cookies, erhöht sich das entsprechende Netzwerkübertragungsvolumen bei jeder Anfrage. Die Bedienung ist sehr einfach. Das von uns verwendete Front-End-Framework ist wie folgt:

Die Hauptfunktion des obigen Codes besteht darin, dass er nach dem Betreten des Systems zunächst zu LocalStorage wechselt, um die Zeit des letzten Verlassens abzurufen, dann die aktuelle Zeit abzurufen und die beiden Zeiten zu subtrahieren Bei weniger als 10 Sekunden gehen wir davon aus, dass es sich um eine Aktualisierung handelt. Wenn der Wert größer als 10 Sekunden ist, gehen wir davon aus, dass es sich um eine geschlossene Registerkarte oder eine neue Anmeldung handelt. Dann können wir verschiedene Methoden anwenden, um dem Kundenservice ein besseres Erlebnis zu bieten Ich muss nicht jedes Mal 10 Sekunden warten, um mich am Telefonsystem anzumelden. Das ist immer noch sehr wichtig, Hoho, wenn er diese Fragen nicht gehabt hätte ... Natürlich, tatsächlich RD muss diese Art von User Experience-First-Denkung schrittweise kultivieren, auch wenn dadurch die Effizienz des Kundenservice ein wenig verbessert werden kann. Jeder Ort ist unsere Zeit wert, um ihn zu optimieren

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

Lassen Sie mich den entsprechenden Exit-Code unten posten. Ich habe vergessen, ihn vorher zu erwähnen. Egal, ob die Seite aktualisiert oder geschlossen wird, wir werden den Vorgang zum Abmelden vom Telefonsystem durchführen. also müssen wir jedes Mal, wenn wir reinkommen, erneut einchecken

Möglicherweise stellen wir auch einige Probleme fest, nämlich beim Aktualisieren, Schließen der Seite, Weiterleiten und Zurückspringen. Sie müssen aus dem standardmäßigen sekundären Bestätigungsfeld des Browsers herausspringen, aber wenn der Benutzer auf die Schaltfläche zum Beenden des Systems klickt, wird der Dialog in seinem Die eigene Komponentenbibliothek muss angezeigt werden. Der spezifische Code lautet wie folgt:

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

Das Obige ist der gesamte Inhalt des vom Herausgeber eingeführten JS, um zu unterscheiden, ob die Browserseite aktualisiert oder geschlossen ist. Ich hoffe, dass es für alle hilfreich ist!

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