创建链接到前一个网页的<a>标签最简单的方法是什么?基本上是一个模拟的后退按钮,但实际上是一个超链接。只提供客户端技术。
编辑
寻找能够在鼠标悬停时显示你要点击的页面URL的解决方案,就像一个正常的静态超链接一样。我不希望用户在鼠标悬停在超链接上时查看history.go(-1)。到目前为止我发现的最好的是:
< >脚本
文档。写入('<a href="' +文档。referrer + '">Go Back</a>');
> < /脚本
是文档。引用可靠吗?跨浏览器的安全吗?我很乐意接受更好的答案。
你可以试试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
后退链接是将浏览器向后移动一页的链接,就像用户单击了大多数浏览器中可用的后退按钮一样。反向链接使用JavaScript。如果您的浏览器支持JavaScript(它确实支持)和窗口,它会将浏览器向后移动一页。对象,它是反向链接所必需的。
简单的方法有
<a href="#" onClick="history.go(-1)">Go Back</a>
OR:
函数goBack() {
window.history.back ()
}
<a href="#" onclick="goBack()"< / > / >回去
一般来说,返回链接是没有必要的…返回按钮通常就足够了,通常你也可以简单地链接到你网站的上一页。然而,有时您可能希望提供返回到几个“以前”页面之一的链接,这时返回链接就派上用场了。所以如果你想用更高级的方法,我推荐你下面的教程:
http://www.htmlcodetutorial.com/linking/linking_famsupp_108.html
这个解决方案为您提供了两全其美的解决方案
用户可以将鼠标悬停在链接上查看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>
对于回到上一页使用锚标签< >,下面是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)只工作ok,如果你已经点击了一个链接,并在当前浏览器窗口的当前选项卡打开链接。
如果你在新标签中打开链接,它将不起作用。这里history.back()将无法工作,如果链接在web浏览器的新选项卡中打开。
如果在第二个域中单击,或者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)
);