如何制作HTML反向链接?

2020/10/05 04:01 · javascript ·  · 0评论

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

编辑

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

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

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

另一种方式:

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

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

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

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

尝试这个:

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

你可以试试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

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

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

若要使用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浏览器的“新建”选项卡中打开了链接,则此功能将不起作用。

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

尝试这个

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

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

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

使用按钮的最佳方法是

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

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)
);
本文地址:http://javascript.askforanswer.com/ruhezhizuohtmlfanxianglianjie.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!