如何制作HTML反向链接?

pai*_*lee 258 html javascript hyperlink

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

编辑
寻找能够显示您在悬停时要点击的页面的URL的解决方案,就像普通的静态超链接一样.当我将history.go(-1)鼠标悬停在超链接上时,我宁愿让用户看到它.到目前为止我发现的最好的是:

<script>
  document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>
Run Code Online (Sandbox Code Playgroud)

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

Baj*_*ang 476

另一种方式:

<a href="javascript:history.back()">Go Back</a>
Run Code Online (Sandbox Code Playgroud)

  • 对于一个按钮:`<button type ="button"onclick ="javascript:history.back()">返回</ button>` (7认同)
  • 这种方法的缺点是标准浏览器功能(例如“悬停查看 URL”和右键单击 -&gt; 复制链接)将被破坏。 (3认同)

pai*_*lee 107

此解决方案的好处是可以在悬停时显示链接到页面的URL,正如大多数浏览器默认情况下那样,而不是history.go(-1)或类似:

<script>
    document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>
Run Code Online (Sandbox Code Playgroud)

  • 此解决方案的缺点是您将无法返回多个页面.例; 导航到页面a,b,c,d - 重复按下后退按钮c,d,c,d,c,d.将此与.history.back()a,b,c,d进行比较,反复按d,c,b,a (14认同)
  • 这也有利于覆盖引用页面在链接上使用`target ="_ blank"属性打开的情况,`history.go(-1)`没有. (9认同)
  • 此解决方案丢失#后面的链接部分,'javascript:history.back()'正常工作. (4认同)

Hem*_*lia 38

你可以试试javascript

<A HREF="javascript:history.go(-1)">
Run Code Online (Sandbox Code Playgroud)

请参阅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)
}
Run Code Online (Sandbox Code Playgroud)
 <a href="http://www.javascriptkit.com" onMouseover="showtext(this)" onMouseout="hidetext()">JavaScript Kit</a>
Run Code Online (Sandbox Code Playgroud)

检查jsfiddle


api*_*guy 38

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

试试这个:

<a href="#" onclick="history.go(-1)">Go Back</a>
Run Code Online (Sandbox Code Playgroud)


Viv*_*ajh 28

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

  • 用户可以将鼠标悬停在链接上以查看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;
}
Run Code Online (Sandbox Code Playgroud)
<a id="back-link">back</a>
Run Code Online (Sandbox Code Playgroud)


小智 18

反向链接是将浏览器向后移动一页的链接,就好像用户单击了大多数浏览器中提供的"后退"按钮一样.反向链接使用JavaScript.如果您的浏览器支持JavaScript(它支持JavaScript)并且它支持window.history对象(后面链接所必需的),它会将浏览器移回一页.

简单的方法是

<a href="#" onClick="history.go(-1)">Go Back</a>
Run Code Online (Sandbox Code Playgroud)

要么:

function goBack() {
  window.history.back()
}
Run Code Online (Sandbox Code Playgroud)
<a href="#" onclick="goBack()" />Go Back</a>
Run Code Online (Sandbox Code Playgroud)

一般来说,不需要反向链接...后退按钮通常非常好,通常您也可以直接链接到您网站的上一页.但是,有时您可能希望提供一个链接回几个"之前"页面中的一个,这就是后面链接派上用场的地方.如果你想以更高级的方式做,我会在下面的教程中推荐你:

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

  • 与投票最多的解决方案不同,这会保持用户的滚动位置。 (2认同)

Vir*_*ren 17

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

我已经尝试了两种方法。

1)

<a href="#" onclick="location.href = document.referrer; return false;">Go Back</a>
Run Code Online (Sandbox Code Playgroud)

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

2)

<a href="javascript:history.back()">Go Back</a>
Run Code Online (Sandbox Code Playgroud)

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

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


mac*_*ack 7

试试这个

<a href="javascript:history.go(-1)"> Go Back </a>
Run Code Online (Sandbox Code Playgroud)


Ash*_*ngh 6

使用按钮的最佳方法是

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


Roe*_*rel 5

<a href="#" onclick="history.back();">Back</a>
Run Code Online (Sandbox Code Playgroud)