Tab-Wechsel im Browser erkennen: JavaScript Blur & Focus

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

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:

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.

Außerdem zeige ich dir, wie du die bekannte WordPress Vorschau Funktion selber bauen kannst, so dass der Browser automatisch den Tab wechselt.

Hintergrundaktivitäten reduzieren

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.

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. 🙂

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

Wenn du jQuery verwendest kannst du den gleichen Code nutzen, normales JavaScript funktioniert da ja natürlich auch.

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

Automatischer Tab-Wechsel wie in der WordPress Vorschau

Wenn Du bei WordPress die Backend Vorschau verwendest wird sie in einem neuen Tab geöffnet. Wenn du erneut klickst und der Tab noch geöffnet ist, wechselt der Browser wieder auf diesen Tab und lädt die URL neu. Hier kannst du das selber mal ausprobieren:

See the Pen WordPress Preview Tab Demo by WebDEasy (@WebDEasy) on CodePen.

Über zwei einfache Codezeilen lässt sich die Funktion umsetzen:

// the URL to open in the new tab
let url = previewInput.value;

// open tab or switch to tab if already exists
let previewTab = (window.previewTab && window.previewTab.close()) || window.open(url, "previewTab");

Den Namen previewTab habe ich frei gewählt. Wenn du einen anderen nutzen möchtest, kannst du alle vorkommen davon im Code ersetzen (4x).

Diese Funktion hat zwar nichts mit dem blur & focus Event zu tun, trotzdem finde ich diese Funktion so cool und simpel und wollte sie unbedingt mal zeigen! 🙂