Question

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

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

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

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

Answer 1

另一种方式：

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

Answer 2

此解决方案的好处是可以在悬停时显示链接到页面的网址，因为大多数浏览器默认情况下会这样做，而不是history.go(-1)或类似：

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

Answer 3

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

试试这个：

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

Answer 4

你可以试试javascript

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

参考JavaScript Back Button

修改

显示引用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

Answer 5

此解决方案为您提供两全其美的优势

用户可以将鼠标悬停在链接上以查看网址
用户不会以损坏的后筹码结束

以下代码评论中的更多详细信息。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 6

反向链接是将浏览器向后移动一页的链接，就好像用户单击了大多数浏览器中提供的“后退”按钮一样。反向链接使用JavaScript。如果您的浏览器支持JavaScript（它可以支持JavaScript），并且它支持window.history对象，那么它会将浏览器移回一页，这对于反向链接是必需的。

简单方法

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

OR：

＆＃13;

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

＆＃13;

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

＆＃13;

一般来说，后退链接是不必要的...后退按钮通常非常好，通常您也可以直接链接到您网站的上一页。但是，有时您可能希望提供一个链接回到以前的几个＆＃34;之前的＃34;页面，以及后面链接派上用场的地方。如果你想以更高级的方式做，我会在下面的教程中推荐你：

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

Answer 7

试试这个

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

Answer 8

要使用锚定标签<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()在这里将不起作用。

Answer 9

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

Answer 10

您也可以history.back()与document.write()一起使用，仅在实际可以返回的地方显示链接：

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

Answer 11

使用按钮的最佳方法是

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

Answer 12

如果您在第二个域中单击，或者引荐来源网址为空，则

history.go(-1)不起作用。

因此，我们必须存储到达该域时的historyCount，并返回这边的导航数减去1。


// if referrer is different from this site
if (!document.referrer.includes(window.location.host)) {
  // store current history length
  localStorage.setItem('historyLength', `${history.length}`);
}

// Return to stored referrer on logo click
document.querySelector('header .logo').addEventListener('click', 
  () =>
   history.go(Number(localStorage.getItem('historyLength')) - history.length -1)
);

如何制作HTML反向链接？

12 个答案: