JS unterscheidet, ob die Browser -Seite aktualisiert oder geschlossen ist

Webentwickler müssen sich häufig mit verschiedenen Bedürfnissen von Produktmanagern in der Systementwicklung stellen. Natürlich sind die meisten von ihnen immer noch hilfreich für die Produkterfahrung. Wenn wir beispielsweise heute erwähnt werden, aktualisieren Sie die Seite vorwärts und rückwärts und schließen Sie das Browser -Tag, um eine Fehloperation von Benutzern zu vermeiden, eine sekundäre Bestätigungsaufforderung ist erforderlich. Ich glaube, jeder ist sehr vertraut damit. Mit dem vom Browser bereitgestellten Bom -Ereignis -Mechanismus kann es lösen. Sie können das Ereignis des Fensterobjekts verwenden. Wenn der Produktmanager nur eine solche Anfrage stellt, ist er in der Tat verständlich, erfordert jedoch mehr als diese ...

Während einer Projektentwicklung schlug der Produktmanager beispielsweise einen "Verbesserungsplan" für unsere Implementierung vor:

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

Ihre Aktualisierung entspricht dem Schließen der auf der Registerkarte angezeigten Kopie. Sie müssen es anders behandeln. Aktualisieren Sie die Eingabeaufforderung XXX und SSS beim Schließen, damit der Benutzer klarer sein kann. In Anbetracht der Benutzererfahrung ist es sehr gut. Ich möchte immer noch sagen, dass Sie aufstehen können ... Wenn der Browser schließt und erfrischt, wurde er anders behandelt. Die Eingabeaufforderungen sind unterschiedlich, aber unsere benutzerdefinierten Teile können unterschiedliche Texten nicht anzeigen. Natürlich gibt es auch einige Hack -Methoden, aber es ist schwierig, sich an mehrere Browser anzupassen. Die Implementierungsmechanismen der Schließung von Registerkarten und Aktualisierungen in jedem Browser sind unterschiedlich.

Warum müssen Sie 10 Sekunden verzögern, damit der Agent jedes Mal, wenn Sie sich anmelden, beim Telefonsystem einchecken? Kann diese Grenze entfernt werden? Die Benutzererfahrung ist schade! Wir möchten es auch entfernen, aber es wird Probleme mit einem häufigen Check-in und außerhalb des Telefonsystems geben. Der Benutzer aktualisiert den Browser und checkt erneut ein. Wenn das Intervall kurz ist, fällt das Telefonsystem aus. Um dieses Problem zu vermeiden, haben wir diese Einschränkung hinzugefügt, aber wenn wir zurückdenken, können wir das Thema, das wir heute diskutieren, eingeben.

Unterscheiden Sie zwischen erfrischenden und schließen Registerkarten

Wir können nicht unterscheiden, ob die Registerkartenseite nach dem Browserereignis aktualisiert oder schließt, und dann unterschiedliche Aktionen ausführen, bevor die entsprechende Aktion ausgelöst wird. Für die dritte Stellungnahme, die das obige Produkt oben aufgewendet hat, können wir jedoch in Betracht ziehen, es zu optimieren. Dies ist, dass es beim Auffrischen nur 10 Sekunden verzögert und nicht verzögert, wenn eine neue Anmeldung oder schließt die Registerkarte nach einer Zeitspanne.

Es ist eigentlich sehr einfach, dies zu tun. Sie können den lokalen Speichermechanismus des Browsers wie Cookies, LocalStorage usw. verwenden. Hier können Sie SessionStorage nicht verwenden, da nach dieser Antwort der Cache ungültig ist. Da das Speichern im Cookie die Anzahl der Bytes erhöht, wird die entsprechende Netzwerkübertragung in jeder Anfrage zunehmen, wir verwenden lokalstorage. Sein Betrieb ist sehr einfach und das von uns verwendete Front-End-Framework ist AngularJS, was wie folgt lautet:

 const max_wait_time = 10; const CurrentDate = new Date (). GetTime (); const lastleavetime = parseInt (this. $ window.localStorage.getItem ('LastleEavetime'), 10), 10) || Stromdatum; this.secondcounter = math.max (max_wait_time - math.ceil ((currentDate - lastLeavetime) / 1000), 0); if (this.secondcounter> 0) {this.LogoutTimeInterval = this. this.secondcounter, false) .then (() => {this.updateBystatus (this.avayaService.status.offline);});} else {this.UpdateBystatus (this.avayaservice.status.offline);};};};};};};};};};};};};};};};

Die Hauptfunktion des obigen Code ist, dass nach dem Eintritt in das System zuerst nach LocalStorage teilgenommen wird, um die Zeit des letzten Ausstiegs zu erhalten, dann die aktuelle Zeit zu erhalten und die zweimal zu subtrahieren. Wenn der Wert weniger als 10 Sekunden beträgt, denken wir, dass dies eine Aktualisierung ist. Wenn der Wert größer als 10 Sekunden ist, denken wir, dass er die Registerkarte schließen oder sich anmelden soll, und dann können wir verschiedene Methoden ausführen, um den Kundenservice eine bessere Erfahrung zu bieten. Es ist nicht erforderlich, 10 Sekunden lang für jeden Eintrag in das System zu warten, bevor Sie das Telefonsystem einchecken. Der Produktmanager ist immer noch sehr wichtig. Huh, wenn es nicht seine Zweifel gäbe, wären wir vielleicht nicht gekommen, um diesen Ort zu optimieren ... Natürlich sollte RD dieses Denken zuerst an die Benutzererfahrung kultivieren. Selbst wenn es ein wenig gibt, das den Kundendienst Effizienz verbessern kann, lohnt es sich, die Zeit zu optimieren.

Lassen Sie uns den relevanten Exit -Code unten veröffentlichen. Ich habe vorher vergessen zu sagen, ob es erfrischt oder die Registerkartenseite schließt. Solange die Seite zerstört wird, werden wir den Betrieb der Anmeldung aus dem Telefonsystem durchführen, sodass wir jedes Mal, wenn wir hereinkommen, erneut einchecken müssen.

 // Die Seite aktualisieren oder das Fenster $ $ schließen. $ window.onunload = () => {$ window.localstorage.setItem ('LastLeavetime', New Date (). GetTime ());};

Möglicherweise bemerken wir auch einige Probleme, dh zu aktualisieren, die Seite zu schließen, vorwärts und rückwärts. Der spezifische Code lautet wie folgt:

 OnStatusclick (Index, Name) {if (name === 'exit') {this.mgdialog.openconfirm ({showClose: false, template: 'app/header/logoutdialog.html', Controller: 'HeaderDialogController als Dialog', {{{{{{{'tith' tith '. {this. $ window.location.href = '/logout'i; this.$Window.onbeforeUload = null;});} else {// interne Operationen, jeder muss sich keine Sorgen um ...}} machen

Das obige ist der gesamte Inhalt von JS, den der Editor Ihnen vorstellt, um zu unterscheiden, ob die Browser -Seite aktualisiert oder geschlossen ist. Ich hoffe, es wird für alle hilfreich sein!