JavaScript ist ein vielseitiges Werkzeug in der Webentwicklung, das sowohl interaktive Anwendungen ermöglicht als auch genutzt werden kann, um die Aufmerksamkeit der Nutzer zu lenken. Dieser Beitrag zeigt gängige Techniken mit Code-Beispielen und diskutiert, wie Nutzer sich schützen und Entwickler verantwortungsvoll handeln können.
Manipulation des Seitentitels
Eine bekannte Methode, um Aufmerksamkeit zu erregen, ist die Änderung des Seitentitels, insbesondere wenn ein Nutzer die Seite verlässt.
Beispiel: Blinkender Seitentitel
let originalTitle = document.title;
let attentionTitle = "Komm zurück! ";
function toggleTitle() {
document.title = document.title === originalTitle ? attentionTitle : originalTitle;
}
let titleInterval;
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
titleInterval = setInterval(toggleTitle, 1000);
} else {
clearInterval(titleInterval);
document.title = originalTitle;
}
});
Erweiterte Anwendung: Intervalle
Um die Aufmerksamkeit der Nutzer zu erhöhen, kann der Titel in bestimmten Intervallen zwischen zwei Zuständen wechseln. Dies erzeugt einen blinkenden Effekt im Browser-Tab.
let originalTitle = document.title;
let attentionTitle = " Neue Nachricht!";
let isOriginal = true;
setInterval(() => {
document.title = isOriginal ? attentionTitle : originalTitle;
isOriginal = !isOriginal;
}, 1000);
In diesem Beispiel wechselt der Seitentitel jede Sekunde zwischen dem ursprünglichen Titel und “ Neue Nachricht!”. Dies kann die Aufmerksamkeit des Nutzers auf den Tab lenken, vornehmlich wenn er sich in einem anderen Tab befindet.
Code-Beispiel: Begrüßung bei Rückkehr zum Tab
let originalTitle = document.title;
let attentionTitle = " Wir vermissen Sie!";
let welcomeBackTitle = " Willkommen zurück!";
let isOriginal = true;
let titleInterval;
// Funktion zum Blinken des Titels, wenn der Tab nicht aktiv ist
function startBlinkingTitle() {
titleInterval = setInterval(() => {
document.title = isOriginal ? attentionTitle : originalTitle;
isOriginal = !isOriginal;
}, 1000);
}
// Funktion, um das Blinken zu stoppen und den Titel zurückzusetzen
function stopBlinkingTitle() {
clearInterval(titleInterval);
document.title = welcomeBackTitle; // Begrüßungstitel anzeigen
setTimeout(() => {
document.title = originalTitle; // Nach kurzer Zeit zum Originaltitel zurückkehren
}, 3000); // Begrüßungstitel bleibt 3 Sekunden sichtbar
}
// Überwachung der Sichtbarkeit des Tabs
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
startBlinkingTitle(); // Startet das Blinken, wenn der Tab verlassen wird
} else {
stopBlinkingTitle(); // Begrüßung bei Rückkehr und Stoppen des Blinkens
}
});
Funktionsweise:
1. Tab verlassen:
Wenn der Tab in den Hintergrund gerät, beginnt der Titel zu blinken und zeigt den Text „ Wir vermissen Sie!“.
2. Tab zurückkehren:
Sobald der Nutzer zum Tab zurückkehrt, erscheint der Titel „ Willkommen zurück!“. Nach 3 Sekunden wechselt er wieder zum ursprünglichen Titel.
Erklärung der Funktionen:
- visibilitychange: Ein Event, das ausgelöst wird, wenn sich die Sichtbarkeit des Tabs ändert.
- document.hidden: Gibt an, ob der Tab gerade im Hintergrund ist.
- setInterval und clearInterval: Steuern das Blinken des Titels.
- setTimeout: Zeigt die Begrüßungsnachricht für eine festgelegte Zeitspanne an.
Dieser Code sorgt für eine dynamische und nutzerfreundliche Interaktion mit dem Seitentitel, ohne aufdringlich zu wirken.
Und noch ein Schritt weiter: wechselnde Nachrichten:
let originalTitle = document.title;
// Nachrichten für inaktive Tabs
let attentionMessages = [
" Vermisst du uns schon?",
" Komm zurück, wir haben Cookies!",
" Notfall! Deine Aufmerksamkeit fehlt!",
" Eine Katze schaut traurig...",
" ♂️ Bitte nicht weglaufen!",
" Wir warten auf dich...",
" Herz gebrochen... Wo bist du?"
];
// Nachrichten für aktive Tabs (Begrüßungstitel)
let welcomeBackMessages = [
" Da bist du ja wieder!",
" Willkommen zurück, Held!",
" Du hast uns gerettet!",
" Endlich bist du wieder da!",
" Wie ein treuer Hund, warteten wir...",
" Jetzt kann’s weitergehen!",
" Willkommen im besten Tab der Welt!"
];
// Funktion zur zufälligen Auswahl einer Nachricht
function getRandomMessage(messages) {
return messages[Math.floor(Math.random() * messages.length)];
}
let titleInterval;
// Funktion, um den Titel bei inaktivem Tab blinken zu lassen
function startBlinkingTitle() {
let attentionTitle = getRandomMessage(attentionMessages); // Zufällige Nachricht
titleInterval = setInterval(() => {
document.title = document.title === originalTitle ? attentionTitle : originalTitle;
}, 1000);
}
// Funktion, um den Titel bei aktivem Tab zurückzusetzen und eine Begrüßung anzuzeigen
function stopBlinkingTitle() {
clearInterval(titleInterval); // Stoppt das Blinken
let welcomeBackTitle = getRandomMessage(welcomeBackMessages); // Zufällige Begrüßung
document.title = welcomeBackTitle;
setTimeout(() => {
document.title = originalTitle; // Nach 3 Sekunden zurück zum Originaltitel
}, 3000);
}
// Überwachung der Tab-Sichtbarkeit
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
startBlinkingTitle(); // Startet das Blinken, wenn Tab inaktiv ist
} else {
stopBlinkingTitle(); // Zeigt die Begrüßung bei Rückkehr
}
});
Änderung des Favicons
Ein weniger offensichtlicher Ansatz ist das dynamische Ändern des Favicons, um visuelle Aufmerksamkeit zu erzeugen.
let originalFavicon = "/favicon.ico";
let newFavicon = "/attention-icon.ico";
function changeFavicon(icon) {
let link = document.querySelector("link[rel='icon']") || document.createElement("link");
link.rel = "icon";
link.href = icon;
document.head.appendChild(link);
}
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
changeFavicon(newFavicon);
} else {
changeFavicon(originalFavicon);
}
});
Bestätigungsdialoge beim Verlassen der Seite
Das Anzeigen von Dialogen beim Verlassen einer Seite kann in manchen Fällen hilfreich sein, wird aber oft missbraucht.
window.addEventListener("beforeunload", (event) => {
event.preventDefault();
event.returnValue = "Möchten Sie die Seite wirklich verlassen?";
});
Auslesen des User-Agents
Webseiten können den User-Agent des Browsers verwenden, um täuschend echt wirkende Benachrichtigungen anzuzeigen.
let osMessage = navigator.userAgent.includes("Win")
? "Fehler: Windows-Sicherheitsupdate erforderlich!"
: "Fehler: MacOS-Berechtigungen widerrufen!";
document.body.innerHTML = `<p style="color: red; font-weight: bold;">${osMessage}</p>`;
Javascript über die Functions.php aufrufen
Um den JavaScript-Code in die functions.php einer WordPress-Website einzufügen, musst du den Code in ein Skript umwandeln und dieses korrekt in deine WordPress-Seite einbinden. Hier sind die Schritte:
1. JavaScript in ein separates Skript auslagern
Es ist Best Practice, den JavaScript-Code nicht direkt in die functions.php einzufügen, sondern ihn in eine separate .js-Datei auszulagern. Du könntest zum Beispiel eine Datei namens custom.js erstellen.
Speichere die Datei im Verzeichnis deines Themes, z. B. in:
/wp-content/themes/dein-theme/js/custom.js
Füge den JavaScript-Code in die Datei custom.js ein.
2. JavaScript mit der functions.php einbinden
Füge folgenden Code in die functions.php deines Themes ein, um das Skript korrekt in deine WordPress-Seite zu laden:
function enqueue_custom_scripts() {
// Registriere und lade das Skript
wp_enqueue_script(
'custom-js', // Ein Name für das Skript
get_stylesheet_directory_uri() . '/js/custom.js', // Pfad zur JS-Datei
array(), // Abhängigkeiten (falls keine, bleibt es leer)
null, // Version (optional)
true // Lädt das Skript im Footer (true = Footer, false = Header)
);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
- Öffne die functions.php-Datei deines Child-Themes.
- Füge den obigen Code ein.
- Stelle sicher, dass du die Datei custom.js im Ordner /js/ des Child-Themes abgelegt hast.
3. JavaScript korrekt ausführen
Damit das JavaScript reibungslos funktioniert, stelle sicher, dass es in den DOMContentLoaded-Event eingebunden ist, falls es auf DOM-Elemente zugreift. Passe deinen JavaScript-Code wie folgt an:
document.addEventListener("DOMContentLoaded", () => {
let originalTitle = document.title;
let attentionTitle = " Wir vermissen Sie!";
let welcomeBackTitle = " Willkommen zurück!";
let isOriginal = true;
let titleInterval;
function startBlinkingTitle() {
titleInterval = setInterval(() => {
document.title = isOriginal ? attentionTitle : originalTitle;
isOriginal = !isOriginal;
}, 1000);
}
function stopBlinkingTitle() {
clearInterval(titleInterval);
document.title = welcomeBackTitle;
setTimeout(() => {
document.title = originalTitle;
}, 3000);
}
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
startBlinkingTitle();
} else {
stopBlinkingTitle();
}
});
});
4. Testing
- Lade die Änderungen auf deinen Server oder deine Entwicklungsumgebung hoch.
- Öffne die Seite im Browser und prüfe, ob der Code korrekt geladen wird (über die Entwickler-Tools im Browser: F12 → Console).
Durch diese Methode bleibt deine WordPress-Website sauber strukturiert, und du kannst den JavaScript-Code leicht aktualisieren oder erweitern, ohne die functions.php unnötig zu belasten.
Fazit
Solche Techniken sollten mit Bedacht eingesetzt werden, da sie bei übermäßigem Gebrauch als störend empfunden werden können. Es ist wichtig, die Nutzererfahrung positiv zu gestalten und aufdringliche Methoden zu vermeiden.
Bitte beachten Sie, dass die genaue Implementierung auf der genannten Website variieren kann. Die bereitgestellten Beispiele dienen zur Veranschaulichung gängiger Praktiken im Umgang mit dem Seitentitel mittels JavaScript.
Mit einem bewussten Umgang mit JavaScript auf beiden Seiten können wir ein vertrauenswürdigeres Web gestalten.