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

编辑 寻找能够在鼠标悬停时显示你要点击的页面URL的解决方案,就像一个正常的静态超链接一样。我不希望用户在鼠标悬停在超链接上时查看history.go(-1)。到目前为止我发现的最好的是:

< >脚本 文档。写入('<a href="' +文档。referrer + '">Go Back</a>'); > < /脚本

是文档。引用可靠吗?跨浏览器的安全吗?我很乐意接受更好的答案。


当前回答

这个解决方案的好处是在悬停时显示链接页面的URL,就像大多数浏览器默认做的那样,而不是history.go(-1)或类似的:

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

其他回答

你也可以在document.write()旁边使用history.back(),只在确实有可以返回的地方时才显示链接:

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

你可以试试javascript

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

引用JavaScript 后退按钮

EDIT

显示参考http://www.javascriptkit.com/javatutors/crossmenu2.shtml的url

在onmouseover中发送元素a本身,如下所示

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

这个解决方案为您提供了两全其美的解决方案

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

如果在第二个域中单击,或者referrer为空,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)
);

这个解决方案的好处是在悬停时显示链接页面的URL,就像大多数浏览器默认做的那样,而不是history.go(-1)或类似的:

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