Ik heb een webpagina waarin mijn ankertags verwijzen naar een van de elementen op dezelfde pagina met #ID. Maar dit verandert mijn URL omdat het de #ID in het achtervoegsel toevoegt. Dus wanneer ik terug wil naar de pagina van waarna ik kwam door op de knop Terug van de browser te klikken, gaat het niet terug naar de vorige pagina. In plaats daarvan gaat het terug naar de hash-selecties die ik heb gemaakt door op de ankertags te klikken . Help me alsjeblieft door hier een oplossing voor te geven.
Antwoord 1, Autoriteit 100%
Wanneer u een HASH-route gebruikt, maakt het een nieuw record in de geschiedenis van de browser hetzelfde alsof u naar een nieuwe pagina hebt genavigeerd. Dus als u op uw site navigeert van een pagina naar een HASH-route op die pagina, navigeert u naar een nieuwe pagina, u moet twee keer op de knop Back klikken om terug te gaan naar uw oorspronkelijke locatie.
Dus als u navigeert door https://example.com -> https://example.com#myHash -> https:/example.com/another-pageDAN DE EERSTE BACK-knop Navigeer naar https://example.com#myHashen de tweede back-knop Navigeren naar https://example.com
Ik hoop dat dat helpt
Antwoord 2
U kunt history.replaceState()Functie van geschiedenis API om dergelijk gedrag te bereiken. Wanneer de gebruiker op Anchor klikt, vervangt u gewoon het huidige geschiedenisitem in plaats van een nieuwe toe te voegen.
Bewerken: window.location.replace()
Een andere aanpak is om window.location.replace ( ) die niet is, voegt geen nieuwe toegang toe aan de geschiedenis van de browser:
De locatie.replace () Methode vervangt de huidige bron met die bij de opgegeven URL. Het verschil van de methode van de toewijzing () is dat na het vervangen van vervangen () de huidige pagina niet in de sessiegeschiedenis wordt opgeslagen, wat betekent dat de gebruiker de back-knop niet kan gebruiken om naar deze te navigeren.
Dus wat kan worden gedaan om het gewenste resultaat te bereiken is om een Onclick-handler toe te voegen op de bodyElement met een logica binnen die de huidige locatie zal vervangen als de huidige locatie geen startpagina is (of een ander bladzijde). Deze handler ziet er op de onderstaande code uit:
function handler (event) {
if (!isAnchor(event.target) return; // return if clicked element is not an anchor (isAnchor function should be also implemented by you. For example, you can add some class on every anchor and check if clicked element is <a> tag with this class)
if (window.location.href !== window.location.origin) { // check if you are currently on the homepage
event.preventDefault(); // if not on homepage then prevent default <a> tag redirect
window.location.replace(event.target.href); // and replace current history item URL with the new URL
}
}