[英]How to go back to the previous page when browser back button is clicked in a webpage even when the hash is changed?
I have a web page in which my anchor tags refer to one of the elements within the same page using #id.我有一个网页,其中我的锚标记使用 #id 引用同一页面中的元素之一。 But this changes my URL as it adds the #id into the suffix.
但这会更改我的 URL,因为它将 #id 添加到后缀中。 So now when I want to go back to the page from where I came by clicking the back button of the browser, it doesn't go back to the previous page instead it goes back to the hash selections I have made by clicking the anchor tags.
所以现在当我想通过单击浏览器的后退按钮返回到我来的页面时,它不会返回上一页,而是返回到我通过单击锚标记所做的哈希选择. Please help me by giving a solution to this.
请帮我解决这个问题。
When you use a hash route it creates a new record in the browser history the same as if you navigated to a new page.当您使用哈希路由时,它会在浏览器历史记录中创建一个新记录,就像您导航到新页面一样。 So if you navigate on your site from a page to a hash route on that page, then navigate to a new page, you will have to click on the back button twice to get back to your original location.
因此,如果您在您的网站上从一个页面导航到该页面上的哈希路由,然后导航到一个新页面,则必须单击两次后退按钮才能返回到原始位置。
So if you navigate https://example.com -> https://example.com#myHash -> https:/example.com/another-page
then the first back button click will navigate to https://example.com#myHash
and the second back button click will navigate to https://example.com
因此,如果您导航
https://example.com -> https://example.com#myHash -> https:/example.com/another-page
那么第一个后退按钮点击将导航到https://example.com#myHash
和第二次后退按钮点击将导航到https://example.com
Hope that helps希望有帮助
You can use history.replaceState()
function from History API to achieve such behavior.您可以使用History API 中的
history.replaceState()
函数来实现此类行为。 When user will click on anchor you will just replace current history item instead of adding a new one.当用户单击锚点时,您将只替换当前的历史记录项目而不是添加新的历史记录项目。
Edit: window.location.replace()
编辑:
window.location.replace()
Another approach is to use window.location.replace() which is does not adds a new entry to browser's History:另一种方法是使用window.location.replace() ,它不会向浏览器的历史记录添加新条目:
The Location.replace() method replaces the current resource with the one at the provided URL.
Location.replace() 方法用提供的 URL 中的资源替换当前资源。 The difference from the assign() method is that after using replace() the current page will not be saved in session History, meaning the user won't be able to use the back button to navigate to it.
与assign() 方法的不同之处在于,在使用replace() 后,当前页面将不会保存在会话历史记录中,这意味着用户将无法使用后退按钮导航到该页面。
So what can be done to achieve the desired result is to add an onclick handler on the body
element with a logic inside which will replace current location if current location is not a homepage (or any other page).因此,可以做些什么来实现预期的结果是在
body
元素上添加一个 onclick 处理程序,其中包含一个逻辑,如果当前位置不是主页(或任何其他页面),它将替换当前位置。 This handler will look similar to the code below:此处理程序将类似于以下代码:
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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.