如何制作HTML反向链接?


285

创建<a>链接到上一个网页的标签的最简单方法是什么?基本上是模拟的后退按钮,但实际上是超链接。请仅使用客户端技术。

编辑
查找能够在悬停时显示您要单击的页面URL的解决方案,例如普通的静态超链接。我宁愿用户在history.go(-1)超链接上悬停时也不看。到目前为止,我发现的最好的是:

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

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


2
JavaScript是一种客户端技术,某些客户端(例如我)只是选择禁用它(默认情况下)。那就是客户的力量!:D但是,是的,HTML本身无法确定上一页是什么。
animuson

Answers:


512

另一种方式:

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


9
和一个按钮:<button type="button" onclick="javascript:history.back()">Back</button>
狮子座

1
这种方法的缺点是,标准的浏览器功能(如“悬停查看URL”和右键单击->复制链接)将被破坏。
Vivek Maharajh

我认为更多是关于语义的。返回“按钮”比返回“链接”更贴切。这两个选项都很棒,而且两个选项都以自己的方式正确。
Jaspreet Singh,

111

与大多数浏览器默认情况一样,此解决方案的优点是在悬停时显示链接到的页面的URL,而不是history.go(-1)类似地:

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

9
这还具有覆盖以下情况的好处:引用页面打开时,target="_blank"链接上的属性history.go(-1)没有打开。
克里斯·克里斯乔

4
此解决方案在#之后丢失了链接部分,'javascript:history.back()'正常工作。
Liviu

15
此解决方案的缺点是您将不能返回多于一页。例; 导航到页面a,b,c,d-反复按返回按钮c,d,c,d,c,d。将此与.history.back()a,b,c,d进行比较反复按返回按钮d,c,b,a
atreeon 2014年

我如何做到这一点,以防万一没有封底,然后重定向到固定的网址history.back() || "myaction/mycontroller"
嵌套

@orangesherbert我已经在一个新答案中解决了该问题(它也满足“显示URL”的要求。)
Vivek Maharajh

44

最简单的方法是使用 history.go(-1);

尝试这个:

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


41

你可以试试javascript

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

参考JavaScript后退按钮

编辑

显示参考网址:http://www.javascriptkit.com/javatutors/crossmenu2.shtml

并在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


您能解释一下最后的修改吗?我只想要一个普通链接,如大多数浏览器底部所示。
paislee,2012年

正如所有浏览器所显示的那样,您无需执行任何操作,但是如果您想在自己的div中显示它,则可以tabledescription在页面中的任意位置指定一个div ,以在锚标签上的鼠标上显示链接
Hemant Metalia

40

该解决方案为您提供两全其美的解决方案

  • 用户可以将鼠标悬停在链接上以查看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>


很棒的答案。在自定义绑定的背景下,我几乎在所有淘汰赛项目中都使用了此功能。
pimbrouwers

好答案!我必须return false;在Chrome中添加onclick函数,以防止其将当前页面添加到浏览器历史记录中。
马歇尔·莫里斯

25

若要使用Anchor Tag返回到上一页<a>,下面是2种工作方法,其中第一种方法较快,并且在返回上一页时具有很大的优势

我尝试了两种方法。

1)

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

如果您单击了链接并在当前浏览器窗口的“新建选项卡”打开了链接,则上述方法(1)效果很好。

2)

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

如果您单击了链接并在当前浏览器窗口的“当前选项卡”打开了链接,则上述方法(2)只能正常运行。

如果您在“新标签页”中有打开的链接,它将无法正常工作。history.back()如果在Web浏览器的“新建”选项卡中打开了链接,则此功能将不起作用。


18

反向链接是使浏览器向后移动一页的链接,就像用户单击了大多数浏览器中可用的“返回”按钮一样。反向链接使用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


2
与投票最多的解决方案不同,这可以保持用户的滚动位置。
Ketri 2013年

@Ketri您可以为声明提供支持吗?它们应该是相同的:w3schools.com/jsref/met_his_back.asp
FarO

8

尝试这个

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


1

您还可以仅在实际上有地方可以返回时使用history.back()旁边document.write()显示链接:

<script>
  if (history.length > 1) {
    document.write('<a href="javascript:history.back()">Go back</a>');
  }
</script>

document.write覆盖页面上的所有内容。为什么你会永远使用?
jpaugh

您必须在页面仍在加载时执行此脚本。
Leonid Vasilev

0

使用按钮的最佳方法是

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.