Tab-Wechsel im Browser erkennen: JavaScript Blur & Focus

Tab-Wechsel im Browser erkennen: JavaScript Blur & Focus Thumbnail
Veröffentlicht am 30. Juli 2020

Durch das Erkennen des Tab-Wechsels im Browser kann man einige coole Funktionen zaubern. Und wie das geht, erfährst Du hier!

Anzeige

Es gibt einige Features, bei denen es nützlich sein kann, den Tab-Wechsel eines Besuchers mitzubekommen. Dazu gehören beispielsweise die Einschränkung der Hintergrundaktivitäten und das Abspielen einer Animation auf Deiner Website.

Eine hübsche Funktionen, die man durch das Erkennen des Tab-Wechsels bauen kann ist auch das hier:

Anzeige eines anderen Tab-Titels beim Tab-Wechsel (Demo Funktion)
Anzeige eines anderen Tab-Titels beim Tab-Wechsel (Demo Funktion)

Der Seitentitel wird nach belieben verändert und kann lustige oder auch hilfreiche Informationen darstellen. Eine kleine Spielerei die für das besondere Etwas sorgen kann und auch bei dem Ein oder Anderen zur Verwunderung führen kann.

Neben einem spaßigen Effekt, kann das Verändern des Seitentitels aber auch die Aufmerksamkeit des Nutzers (erneut) auf Deine Seite ziehen. Ist der Benutzer vielleicht geneigt die Seite gerade zu verlassen kann er mit einem lustigen, netten oder hilfreichen Hinweis zurück auf Deine Seite „gezogen“ werden.

Weitere nützliche Anwendungsgebiete

Wenn Du komplexe Berechnungen mit JavaScript durchführst belastet das den Browser Deiner Besucher. Da wir aber wissen, wann ein Besucher auf dem Tab unserer Website ist und wann nicht, können wir im entsprechenden Zeitraum die Berechnungen pausieren, sofern das keinen Einfluss auf das erwartete Ergebnis hat.

Anzeige

Durch die Einschränkung dieser Hintergrundaktivitäten können gerade Nutzer mit schwächerem Rechner oder am Smartphone entlastet werden.

Es gibt (fast) immer Optimierungs-Potential: Mit diesen Code Snippets für WordPress kannst Du Deine Seite noch ordentlich tunen!

Ein weiteres Anwendungsgebiet ist das Abspielen einer Animation. Wenn Dein Besucher (zu Deinem Glück) wieder auf Deine Seite zurückkehrt, könntest Du ihn mit einer tollen Animation begrüßen. Natürlich sollte man alles im Rahmen halten, so dass es nicht ausartet.

Für seriöse Seiten bietet sich das vielleicht eher weniger an… aber wenn Du Dein Können unter Beweis stellen willst oder es einfach zum Thema der Seite passt, warum nicht!?

Tab-Wechsel mit JavaScript erkennen

Um den Tab-Wechsel zu erkennen nutzen wir reines JavaScript ohne jQuery und Co. Alles was Du benötigst, verbirgt sich in diesem Code.

Wenn Du von jQuery auf reines JavaScript umsteigen willst, bietet das einige Vorteile und man kann trotzdem alle tollen Funktionen nutzen. 🙂

Anzeige

Wir registrieren das blur Event auf der globalen document Variable. Generell werden das blur und focus Event oft im Zusammenhang benutzt.

Dabei wird das blur Event getriggert, wenn ein Element oder der gesamte Tab (Dokument) den Fokus verlieren, also wir nicht länger auf ihn zugreifen. Im Gegensatz dazu wird das focus Event getriggert, wenn man ein Element oder den Tab (Dokument) wieder fokusiert, also in unserem Fall wieder auf dem Tab ist.

// user leaves the tab
document.addEventListener('blur', (e) => {
  // your custom code here
});

// user enters the tab (again)
document.addEventListener('focus', (e) => {
  // your custom code here
});

Damit ist der benötigte Code schon komplett. Gar nicht schwer, oder? 🙂

Mehr zu blur und focus gibt’s in den MDN web docs.

Übrigens: Die zu Beginn gezeigte Demo lässt sich einfach mit diesem Code umsetzen:

let siteTitle = '';
window.addEventListener('blur', () => {
  siteTitle = document.title;
  document.title = 'Come back! :c';
});

window.addEventListener('focus', () => {
  document.title = siteTitle;
});

Always Happy coding!

Ähnliche Beiträge
NEW 🚀
Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.