如何制作HTML返回链接？

Question

什么是创建指向上一个网页的标签的最简单方法？基本上是模拟返回按钮，但是实际上是超链接。仅使用客户端技术，请。

编辑 寻找具有显示鼠标悬停时即将单击的页面的URL的优点的解决方案，就像正常的静态超链接一样。我不想让用户在悬停在超链接上时看到"history.go(-1)"。到目前为止，我找到的最好的方法是：

<script>
  document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

document.referrer是否可靠？跨浏览器安全吗？如果有更好的答案，我很乐意接受。

- calebds

---

JavaScript是一种客户端技术，有些客户端（比如我）选择默认禁用它。这就是客户端的力量！但是，确实没有办法让HTML自己确定上一页是什么。 - animuson

Answer 1

还有另外一种方法：

<a href="javascript:history.back()">Go Back</a>

- Bajrang

---

对于一个按钮：<button type="button" onclick="javascript:history.back()">返回</button> - Leo

这种方法的缺点是，标准浏览器功能（例如“悬停查看网址”和右键单击->复制链接）将无法使用。 - V Maharajh

我认为这更多是关于语义学的问题。一个“返回”按钮比一个“返回”链接更合适。两个选项都很好，它们各自的方式都是正确的。 - Jaspreet Singh

这应该是此页面上唯一的答案 - 所有其他答案要么重复，要么不如此答案好，因此只会掩盖它... - Ronen Rabinovici

这个解决方案不会显示链接页面的URL，但是它会回到离开时的页面状态 - 特别是HTML表单仍然保留其内容。因此，当处理表单时，这个解决方案是一个不错的选择。 - undefined

Answer 2

此解决方案的好处在于在悬停时显示所链接页面的URL，就像大多数浏览器默认情况下所做的那样，而不是使用history.go(-1)或类似方法：

<script>
    document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

- calebds

---

这也有一个好处，就是可以涵盖引用页面在链接上使用 target="_blank" 属性而打开的情况，而 history.go(-1) 无法做到这一点。 - Chris Krycho

这个解决方案丢失了紧随#后面的链接部分，但 'javascript:history.back()' 可以正常工作。 - Liviu

这种解决方案的缺点是你不能返回超过一页。例如，导航到页面a、b、c、d，反复按返回按钮，只能回到c、d两个页面，而使用.history.back()则可以回到a、b、c、d四个页面，反复按返回按钮时的顺序依次为d、c、b、a。 - atreeon

如何使之在没有后退页面的情况下，重定向到固定URL history.back() || "myaction/mycontroller"。 - nest

@orangesherbert，我已在一个新答案中解决了这个问题（也满足“显示URL”的要求）。 - V Maharajh

解决方案已经有10年的历史了，与此同时，现在有一些像引荐者策略（https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy）这样的东西可以防止有用的引荐者，例如在这种情况下的后向链接。只需记住这一点。 - RiZKiT

Answer 3

这个解决方案让你兼具两全其美的优点：

• 用户可以悬停在链接上查看URL
• 用户不会遭遇破坏的后退栈

更多细节请参见下面的代码注释。

var element = document.getElementById('back-link');

// Provide a standard href to facilitate standard browser features such as 
//  - Hover to see link
//  - Right click and copy link
//  - Right click and open in new tab
element.setAttribute('href', document.referrer);

// We can't let the browser use the above href for navigation. If it does, 
// the browser will think that it is a regular link, and place the current 
// page on the browser history, so that if the user clicks "back" again,
// it'll actually return to this page. We need to perform a native back to
// integrate properly into the browser's history behavior
element.onclick = function() {
  history.back();
  return false;
}

<a id="back-link">back</a>

- V Maharajh

---

真棒的答案。我在几乎所有的 Knockout 项目中使用它来自定义绑定的上下文。 - pim

很棒的答案！我不得不在Chrome中的onclick函数中添加return false;，以防止它将当前页面添加到浏览器历史记录中。 - Marshall Morrise

“最有效”的示例。谢谢！ - Arsen Khachaturyan

Answer 4

你可以尝试使用 JavaScript。

<A HREF="javascript:history.go(-1)">

参考JavaScript后退按钮

编辑

为了显示引用的url，参考http://www.javascriptkit.com/javatutors/crossmenu2.shtml，并将元素a自身在onmouseover中发送如下内容。

function showtext(thetext) {
  if (!document.getElementById)
    return
  textcontainerobj = document.getElementById("tabledescription")
  browserdetect = textcontainerobj.filters ? "ie" : typeof textcontainerobj.style.MozOpacity == "string" ? "mozilla" : ""
  instantset(baseopacity)
  document.getElementById("tabledescription").innerHTML = thetext.href
  highlighting = setInterval("gradualfade(textcontainerobj)", 50)
}

 <a href="http://www.javascriptkit.com" onMouseover="showtext(this)" onMouseout="hidetext()">JavaScript Kit</a>

查看jsfiddle。

- Hemant Metalia

---

你能解释一下最后的编辑吗？我只想要一个像大多数浏览器底部显示的普通链接。 - calebds

所有浏览器都会显示所有内容，因此您无需做任何事情，但如果您想在自己的div中显示它，可以在页面的任何位置指定一个名为“tabledescription”的div，在锚标记上鼠标悬停时显示链接。 - Hemant Metalia

Answer 5

最简单的方法是使用history.go(-1); 请尝试这个：

<a href="#" onclick="history.go(-1)">Go Back</a>

- apiguy

Answer 6

为了使用锚标签<a>返回上一页，以下是两种可行的方法，其中第一种方法更快，并且在返回上一页时具有一个重要优势。

我已尝试过这两种方法。

1）

<a href="#" onclick="location.href = document.referrer; return false;">Go Back</a>

如果您点击链接并在当前浏览器窗口中以新标签页打开链接，则上述方法（1）非常有效。

2)

<a href="javascript:history.back()">Go Back</a>

如果您在当前浏览器窗口中单击链接并在当前标签页中打开链接，则上述方法（2）仅在这种情况下有效。

如果您在新标签页中打开链接，则它将无效。在Web浏览器的新标签页中打开链接时，history.back()将不起作用。

- G_real

Answer 7

反向链接是一种将浏览器后退一页的链接，就像用户在大多数浏览器中单击“后退”按钮一样。反向链接使用JavaScript。如果您的浏览器支持JavaScript（它确实支持），并且它支持window.history对象，那么它将使浏览器后退一页。

简单的方法包括：

<a href="#" onClick="history.go(-1)">Go Back</a>

或者：

function goBack() {
  window.history.back()
}

<a href="#" onclick="goBack()" />Go Back</a>

一般来说，后退按钮就足够了，而且通常你也可以简单地链接到站点中的上一页。但是，有时候您可能想要提供一个链接回到几个“之前”的页面之一，这时候后退链接就非常方便。因此，如果您想以更高级的方式进行操作，请参考下面的教程：

http://www.htmlcodetutorial.com/linking/linking_famsupp_108.html

- user319198

---

与大多数投票解决方案不同，这个解决方案保持了用户原有的滚动位置。 - Jonathan

@Ketri，你能为这个语句提供支持吗？它们应该是相同的：https://www.w3schools.com/jsref/met_his_back.asp - FarO

Answer 8

尝试一下。

<a href="javascript:history.go(-1)"> Go Back </a>

- mack

---

这个成功了！ - Anoop V

Answer 9

<a href="#" onclick="history.back();">Back</a>

- Roee Gavirel

---

我们不能在这里留空href的数量。我们可以使用#！ - mehmet

Answer 10

使用按钮的最佳方式是

<input type= 'button' onclick='javascript:history.back();return false;' value='返回'>

- Ashutosh K Singh