So erstellen Sie einen Zurück-Button auf einer Webseite. Erstellen Sie eine „Zurück“-Schaltfläche. Eine universellere Möglichkeit

In diesem Artikel schauen wir uns an, wie Sie an jeder gewünschten Stelle eine „Zurück“-Schaltfläche erstellen können. Ich denke, anhand des Namens des Buttons ist bereits klar, was passiert, wenn man darauf klickt. Ein solcher Button kann sowohl in eine Kategorie als auch in das Material selbst eingefügt werden. Alles ist ganz einfach gemacht.

Es gibt mehrere Möglichkeiten, wie man eine Schaltfläche hinzufügen kann, aber ich persönlich habe nur eine Möglichkeit verwendet. Nämlich die dritte der drei von mir vorgeschlagenen Optionen. Etwas weiter unten werde ich Ihnen sagen, warum.

Welche Möglichkeiten haben wir:

Der Vorteil der dritten Option besteht darin, dass Sie, wenn Sie den Text einer Schaltfläche bearbeiten oder eine Stilklasse ändern/hinzufügen müssen, nur das Modul selbst reparieren müssen und nicht die Schaltfläche an allen Stellen, an denen sie sich befindet.

Also habe ich auf einer meiner Websites die dritte Option verwendet:

Das Modul „HTML-Code“ wurde erstellt und dort der Button-Code mit der Erweiterung „Sourcerer“ eingefügt, die es ermöglicht, dem Material beliebigen Code hinzuzufügen.

Mein Arbeitsschaltflächencode:

zurückkommen

Der Text ist mithilfe von Komponenten aus Bootstrap 3 leicht mit einem Pfeil verziert und die Schaltfläche selbst ist über CSS gestaltet.

Manchmal ist es auf Webseiten erforderlich, vorübergehend zu einer anderen Seite (nennen wir sie Hilfsseite) zu wechseln und dann zurückzukehren und mit der Arbeit fortzufahren. Dies könnte beispielsweise eine Hilfeseite oder eine Registrierungsseite sein.

In diesem Fall kann die Absenderadresse natürlich sehr unterschiedlich sein. Wie implementiert man einen solchen umgekehrten Übergang auf einer Website? Reines HTML/CSS reicht hier nicht aus; Sie müssen Javascript verwenden.

Am einfachsten ist es beispielsweise, diese Zeile im Skript auf der Hilfsseite zu verwenden:

Die Verlaufsmethode speichert den Verlauf der Navigation auf einer Seite und ihre Verwendung ähnelt tatsächlich der Verwendung der Vor- und Zurück-Schaltflächen des Browsers, nur etwas funktionaler. Dies ist die einfachste und bequeme Weise, aber nur unter einer Bedingung: wenn die neue (Hilfs-)Seite nicht in einem neuen Fenster geöffnet wird. Andernfalls wird die Hilfsseite zum ersten Mal geöffnet (genauer gesagt, es ist die erste Sitzung dafür, es gab noch keine Übergänge darauf). Und das bedeutet, dass es tatsächlich kein Zurück mehr gibt. Deshalb diese Methode kann nicht als universell bezeichnet werden. Es funktioniert nicht, wenn der Benutzer gezwungen wird, die Seite in einem neuen Tab zu öffnen, oder der Browser dies für ihn erledigt – entsprechend den Einstellungen. In diesem Fall hilft das Link-Attribut target=“_self“ nicht weiter: Es ist unmöglich, von einer geöffneten Hilfsseite zurückzukehren (es sei denn, Sie geben natürlich die URL der Quellseite manuell in die Adressleiste des Browsers ein).

Zur Implementierung benötigen Sie Skripte sowohl auf der Quell- als auch auf der Hilfsseite. Die Idee kann variieren. Eine davon basiert darauf, dass die Adresse (URL) der Quellseite als GET-Anfrage in der Adressleiste des Browsers gespeichert wird. Damit. Wenn die Hilfsseite eine solche Anfrage erhält, weiß sie über deren Quelle Bescheid. Auf dieser Grundlage wird ein Zurückschalten möglich, d.h. zu der Seite, von der aus der Übergang durchgeführt wurde.

Schematisch lässt sich dies wie folgt darstellen:

Auf der Seite, AUF DER der Übergang erfolgen soll, gibt es das folgende Skript, bei dem es sich um eine Funktion handelt – einen Mausklick-Handler (onclick):

Funktion save_back(url) (

var docum_href = document.location.toString().substring(docum_protocol.length+2);
if(docum_href.substring(0,1) == "/") (
docum_href = docum_href.substring(1);
}
var href = window.location.protocol+"//"+document.location.hostname + url + "?"+docum_href;
window.open(href);
}

Damit die Funktion im Skript funktioniert, müssen Sie ihren Handler auf eine der folgenden Arten auf einem Element installieren, beispielsweise wie folgt:

Klicken Sie hier, um zur Support-Seite zu gelangen

Beachten Sie, dass das href-Attribut dieses Links eine entsprechende Adresse hat, die in der Onclick-Ereignishandlerfunktion angegeben wird. Dies geschieht, damit Suchroboter verstehen, zu welcher Seite der Link führt, wenn Sie auf den Link klicken. Wenn dies nicht erforderlich ist, sollten Sie ein leeres href-Attribut erstellen, z

Das Prinzip dieses Skripts besteht darin, dass beim Aufruf der Funktion save_back(url) eine (Hilfs-)Seite mit der URL-Adresse geöffnet wird. Dazu wird das Protokoll der Seite (z. B. http oder https) ermittelt, sowie die restliche URL der Original-Webseite, ggf. inklusive eventueller GET-Request-Daten (diese stehen in der URL hinter dem). "?" Zeichen). Die empfangenen Daten werden der URL der geöffneten Seite hinzugefügt – und es erfolgt ein Übergang zu dieser.

Es sollte ein Skript wie dieses haben:

var docum_protocol = document.location.protocol;
var number_questions = docum_location.length-1;

var Frage = "";
if(Anzahl_Fragen > 1)(
Frage = "?";
}
document.location = docum_protocol+"//"+ docum_href + questions + get;
}

Dieses Skript wird auch gestartet, wenn die Maus auf ein beliebiges Element klickt, auf dem der entsprechende Handler installiert ist:

Zurückkehren

Diese Zeile bricht die Standardaktion ab, wenn die Maus auf einen Link klickt. Tatsache ist, dass dem Link standardmäßig gefolgt wird. In diesem Fall erfolgt der Übergang genau zu der im href-Attribut angegebenen Adresse. Diese Adresse (insbesondere auf einer Hilfsseite) darf nicht die Rücksprungadresse der Seite enthalten, von der aus der Übergang erfolgt ist (sofern der Übergang zur Hilfsseite nicht von einer bestimmten Seite, sondern von mehreren Quellseiten aus möglich ist).

Das Skript auf der Hilfsseite liest also den Inhalt der Adressleiste und teilt ihn dann in ein Array von „?“-Elementen auf. Bitte beachten Sie, dass eine URL zwei solcher Zeichen enthalten kann. Die erste erscheint, wie bereits erwähnt, aufgrund der Tatsache, dass die Adresse (abzüglich des Protokolls) der Quellseite zur Adresse der Hilfsseite hinzugefügt wurde. Und das zweite könnte aufgrund des Vorhandenseins von GET-Anforderungsparametern beim Laden der Quellseite vorhanden sein. Mit anderen Worten: In der Adressleiste der Hilfeseite befinden sich möglicherweise ein oder zwei Fragezeichen. Um von einer Sekundärseite zur Originalseite zu wechseln, wenn Sie auf einen Link klicken

Zurückkehren

Die Anfrage wird aus der Adressleiste gelesen und in die gleiche Form umgewandelt, die sie auf der Originalseite hatte, woraufhin die Seite an dieser Adresse geladen wird.

Darüber hinaus ist zu beachten, dass es in dem Artikel tatsächlich nicht um die Rückkehr zur Originalseite, sondern um deren Neuladen geht. Dies ist natürlich nur eine Nachahmung einer Rückkehr. Insbesondere dürfen die auf dieser Seite eingegebenen Daten und deren Einstellungen nicht gespeichert werden. Darüber hinaus wird die Seite im Gegensatz zu RETURN beim Laden von Anfang an geöffnet (d. h. ihr oberer Teil befindet sich oben auf dem Bildschirm). Während ein „echter“ Backtrack die (ursprüngliche) Seite genau an die Stelle zurückbringt, von der aus der Sprung gemacht wurde. Versuchen wir daher, beide Methoden zu kombinieren.

Stellen wir uns also die Aufgabe:

Wenn die Hilfsseite in derselben Registerkarte (Fenster) geöffnet wird, muss die Methode „history.back()“ verfügbar sein.

Wenn sich die Hilfsseite jedoch in einem neuen Fenster öffnet, sollte die oben beschriebene Methode funktionieren (da in diesem Fall History.back() nicht funktioniert).

Das Skript auf der Hilfsseite wird sich geringfügig ändern (die oben genannte Zeile wird hinzugefügt):

Funktion return_to_initial_page() (
History.back();
var docum_location = document.location.toString().split("?");
var docum_href = docum_location;
var docum_protocol = document.location.protocol;
var number_questions = docum_location.length - 1;
var get = docum_location;
var Frage = "";
if (Anzahl_Fragen > 1) (
Frage = "?";
}
document.location = docum_protocol + "//" + docum_href + Frage + get;
}

Zuerst versuchen wir zurück zu gehen. Wenn es funktioniert, funktioniert der Rest des Skripts nicht und Sie kehren zur Originalseite an derselben Stelle zurück, an der der Übergang vorgenommen wurde. Wenn nicht, extrahieren wir wie zuvor die Adresse der Quellseite aus den Parametern der GET-Anfrage und gehen zu dieser.

Natürlich zeigt dieser Artikel nur eine der Technologieoptionen für die „Zurückkehr“ ZURÜCK – zur Originalseite. Zu diesem Zweck könnten neben dem GET-Request auch andere Technologien zum Einsatz kommen, beispielsweise der lokale Speicher localStorage. Um eine Rückkehr ZURÜCK vollständig zu simulieren, wäre es außerdem schön, den Scrollumfang der Originalseite per GET-Anfrage zu übermitteln – damit man später, auch beim Öffnen der Hilfsseite in einem neuen Fenster, an die gleiche Stelle zurückkehren kann auf der Originalseite, von der aus der Übergang zuvor vorgenommen wurde.

Guten Tag, ich habe eine Frage dazu, wie ich den Button nach hinten verschieben und neben den nächsten Button platzieren kann, wenn ich eine Bestellung aufgeben möchte. Jetzt sieht es bei mir so aus. https://yadi.sk/i/_ZNvGrvEhqSk3 Wenn Sie ihn verschieben Wenn es heruntergefahren ist, funktioniert es nicht mehr. Der Code ist dafür verantwortlich. ..

Es gibt eine Lösung

Hallo, kann mir jemand sagen, wie man zum Beispiel im Warenkorb einen Zurück-Button erstellt, damit man zur vorherigen Seite zurückkehren kann?

Fügen Sie an beliebiger Stelle in der Vorlage eine Schaltfläche ein, zum Beispiel diese

+1

Wenn ich im Browser auf die Schaltfläche „Zurück“ drücke, scheinen alle Stile zu verschwinden, bis ich die Seite aktualisiere. Das Standarddesign sollte wie im Screenshot unten angezeigt werden.) Sagen Sie mir, wo das Problem liegt

Hallo, ich habe im Warenkorb einen „Zurück“-Button erstellt, nicht einmal einen Button, sondern nur einen Link mit dem Code „Zurück“. Wenn ich jetzt zum Warenkorb zurückkehre ...

Es gibt eine Lösung

Guten Tag! Ich bin auf folgendes Problem gestoßen: Wenn Sie einen Artikel in Ihren Warenkorb legen und im Browser auf die Schaltfläche „Zurück“ klicken, werden Informationen zu den Artikeln im Warenkorb (im Zusatzblock) erst gespeichert, wenn Sie die Seite aktualisieren. Diese. Gehen Sie zur Website, gehen Sie ...

Die von Ihnen angegebene Website verwendet ein Plugin für den Warenkorb. Als Option mit Änderungen können Sie das Hinzufügen von Waren nicht an?html=1, sondern an?html=1&items=1 senden. Dadurch wird mit dem vollständigen Inhalt des Warenkorbs geantwortet Wagen.

Guten Tag. Bei jedem Schritt während des Bezahlvorgangs wird eine Schaltfläche „Weiter“ angezeigt. Im Thema „Suprime“ habe ich den Schaltflächencode gefunden: