Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

Der Zurück-Button des Browsers ist sicherlich eine der einfachsten Methoden, um zur vorherigen Seite zurückzukehren. Es ist jedoch auch möglich, dass Websites eine Schaltfläche im Content bereitstellen, um dem Besucher einen direkten Link zur vorherigen Seite zu ermöglichen. Es kann sich eben so ergeben, dass das dort und da ganz komfortabel sein kann.

Back-Link mit Class

Für zusätzliche Anpassungsmöglichkeiten oder der Einfachheit von einer Class kannst du jQuery zu verwenden. Füge dazu den folgenden Code im Child Theme in die Datei scrips.js hinzu:

/* Zurück-Button */
(function($) {
	$(function() {
		$(".go-back").on("click", function(e) {
			e.preventDefault();
			window.history.back();
		});
	});
})(jQuery);

Hinzulernen zum Code: Wenn man in JavaScript statt der 'Class' die 'ID' verwendet, kommt es zu Fehlern, wenn man den Zurück-Button mehrmals pro Seite verwendet. Dies liegt daran, dass die Verwendung von $('.go-back') auf eine Class und $('#go-back') auf eine ID verweist. – Die Raute (#) vor dem Namen kennzeichnet eine ID, während der Punkt (.) eine Class kennzeichnet. Es ist zu beachten, dass CSS-IDs auf einer Seite nur einmal verwendet werden dürfen, während CSS-Classen beliebig oft wiederverwendet werden können.

Die Verwendung des Start-Tags <button> ist sehr praktisch, da die Formatierung meistens durch das Theme vorgegeben wird. So wird beispielsweise die Akzentfarbe des Themes für den <button> verwendet, was eine konsistente Gestaltung der Website ermöglicht.

Start-Tag button mit Attributname bzw. Selektor class:

<button class="go-back">Zurück Button</button>

Dasselbe ohne Button-Style:

<a class="go-back" href="#">Zurück zur vorherigen Seite</a>

Back-Link mit Shortcode-Code

In diesem Beispiel wird der Back-Link mit einem Shortcode ohne den Start-Tag <button> erstellt, daher wird keine automatische Formatierung angewendet. Wenn jedoch eine bestimmte Formatierung gewünscht ist, könnte man den Shortcode in Kombination mit CSS-Regeln verwenden, um das Aussehen des Links anzupassen.

Um den Back-Link mit einem Shortcode zu erstellen, kann man einfach [backlink] in den HTML- oder visuellen Editor eingeben, mithin folgendem PHP:

functions.php

/* Shortcode: backlink */
add_shortcode( 'backlink', function() {
return '<a href="javascript:history.back();">Zurück vorig Seite</a>';
});

Shortcode-Code in Kombination mit <button>

Möchte man jedoch den Start-Tag <button> verwenden, kann man den Shortcode innerhalb des Tags platzieren, indem man im Editor den Text:

<button>[backlink]</button> eingibt.

Dazu braucht es zur konformen Darstellung möglicherweise separaten Code, da die Formatierung nicht passen wird, also in etwa:

functions.php

/* Shortcode: backlink mit Button-Style */
add_shortcode('backlink', function() {
    return '<a href="javascript:history.back();" style="color: #fff; text-decoration: none; font-weight: bold;">Zurück vorige Seite</a>';
});

Ende

Hinweis zur Nutzung von Backlinks und Ankern

In Erstellung des Beitrags und den Test hier hat sich oft ergeben, dass mit Zurück nicht an der Stelle zu landen war, von wo aus man geklickt hatte. Somit haben wir versucht, beim Zurücknavigieren auf einen bestimmten Anker zu setzen. Dies hat sich jedoch als nicht besonders funktional erwiesen. Es waren etliche und vergebliche Versuche notwendig, um dies mittels JavaScript in den Griff zu bekommen. Eigentlich umsonst, da das normalerweise ohnehin funktioniert.

• Es war den Tests manchmal (oft) – aus Gründen, die nur der Browser kennt –, dass beim Klicken auf 'Zurück' die vorherige Scrollposition nicht wiederhergestellt wird. Darum hat sich folgender Workflow ergeben.

Es ist auch zu beachten, wenn man das Inhaltsverzeichnis Table of Contents (Toc) anklickt, so folgt die URL mit Fragment, bspw: https://wegerl.at/zurueck-button-vorig-seite/#Was_meint_die_Fachwelt_dazu. Wenn man anschließend nach oben scrollt und zur Testseite klickt und dann zurücknavigiert, wird erneut diese URL aufgerufen. Interessanterweise führt das Zurücknavigieren zur Stelle, von der aus man geklickt hat, und nicht zur URL des Ankers selbst oder ganz oben auf der Seite, – sondern an der Stelle, von der man ursprünglich geklickt hat.

Wenn man also zuvor das Inhaltsverzeichnis (Toc) angeklickt hat und eine Anker-URL (Fragment) angezeigt wird, und danach zum 'Test 1' oder 'Test 2' anklickt und mittels 'Zurück' zurücknavigiert, landet man an der Stelle, wo man 'Test' geklickt hat, und nicht weiter unter- oder oberhalb.

Deshalb sollte das folgende JavaScript der URL automatisch den Anker oder das Fragment #anker hinzufügen und dann automatisch an die Stelle navigieren, von der aus geklickt wurde, ähnlich wie beim Toc:

/* Zurück-Button mit automatischer Anker-Einfügung */
(function($) {
    $(function() {
        $(".go-back").on("click", function(e) {
            e.preventDefault();
            
            // Überprüfen, ob die vorhergehende Seite im Verlauf existiert
            if (document.referrer) {
                var previousUrl = document.referrer;
                
                // Überprüfen, ob die vorhergehende URL bereits einen Anker hat
                if (previousUrl.indexOf('#') === -1) {
                    // Kein Anker vorhanden, Anker hinzufügen
                    previousUrl += '#anker';
                } else {
                    // Anker bereits vorhanden
                    // Überprüfen, ob der Anker mit '#anker' beginnt
                    if (!previousUrl.endsWith('#anker')) {
                        // Anker ist nicht richtig formatiert, korrigieren oder hinzufügen
                        previousUrl = previousUrl.replace(/#(.*)$/, '#anker$1');
                    }
                }
                
                // Zur aktualisierten URL navigieren
                window.location.href = previousUrl;
            } else {
                // Wenn keine vorhergehende Seite im Verlauf vorhanden ist, einfach zurücknavigieren
                window.history.back();
            }
        });
    });
})(jQuery);

Es wäre schön, wenn das funktionieren würde. Das ist jedoch nicht praktikabel, weil es dann direkt den Anker ansteuert und nicht so, wie es beim Fragment vom Table of Contents (Toc) der Fall ist. Beim Fragment von Toc wird man an die Stelle der Seite navigiert, von der aus man geklickt hat. Dies liegt daran, dass das Fragment im Toc bereits in der URL enthalten ist, während der Anker im Code nachträglich eingefügt wird. So arbeiten Browser.

  Es ist nicht direkt möglich, mit JavaScript allein die vorhergehende URL mit einem bestimmten Anker zu manipulieren, insbesondere wenn die Navigation bereits stattgefunden hat. Der Grund dafür ist, dass der Browser aus Sicherheitsgründen den direkten Zugriff auf den Browserverlauf und die vorhergehenden URLs beschränkt.

Wenn man beispielsweise die URL https://wegerl.at/zurueck-button-vorig-seite/#anker anklickt und von dort zur Testseite klickt, landet man beim Zurück-Klicken auf den Anker. Dies geschieht, weil der Anker (<span id="anker"></span>) manuell eingefügt wurde.

• Zu guter Letzt möchte ich nochmals erwähnen, dass es manchmal – aus Gründen, die nur der Browser kennt – vorkommt, dass beim Klicken auf 'Zurück' auch die vorherige Scrollposition wiederhergestellt wird.

Zurück zum Spaß von gestern –
denn manchmal ist alt einfach besser!

Was meint die Fachwelt dazu?

Die Steuerung der Browserhistorie kann in JavaScript komplex sein, speziell, wenn es um das Zurückkehren zur vorherigen Scrollposition geht.

• Browserverhalten: Verschiedene Browser handhaben die Wiederherstellung der Scrollposition unterschiedlich. Manche speichern die Scrollposition automatisch, andere nicht.
• JavaScript und Scroll-Events: Das Verhalten von window.history.back() kann durch Anker-Elemente beeinflusst werden. Dies kann dazu führen, dass der Zurück-Button nicht zur richtigen Position zurückkehrt.

Fazit: JavaScript und die Steuerung der Browserhistorie sind mächtige Werkzeuge, aber sie haben auch ihre Grenzen und Eigenheiten. Es ist manchmal erforderlich, verschiedene Ansätze auszuprobieren oder sogar zu akzeptieren, dass bestimmte Browserverhaltensweisen außerhalb unserer direkten Kontrolle liegen. Die Steuerung der Browserhistorie mit JavaScript ist nicht immer zuverlässig aufgrund unterschiedlicher Browserverhaltensweisen.

• Anderes mit <button> Style im Titel Browserneuladung (Reload page).

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 September