Html 使链接完全不可见？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3648112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a link completely invisible?
提问by Juliano
I'm pretty sure that many people have thought of this, but for some reason I can't find it using Google and StackOverflow search.
我很确定很多人已经想到了这一点，但由于某种原因，我无法使用 Google 和 StackOverflow 搜索找到它。
I would like to make an invisible link (blacklisted by robots.txt) to a CGI or PHP page that will "trap" malicious bots and spiders. So far, I've tried:
我想建立一个不可见的链接（被 robots.txt 列入黑名单）到一个 CGI 或 PHP 页面，该页面将“捕获”恶意机器人和蜘蛛。到目前为止，我已经尝试过：
Empty links in the body:
<a href='/trap'><!-- nothing --></a>This works quite nicely most of the time, with two minor problems:
Problem:The link is part of the body of the document. Even though it is pretty much unclickable with a mouse, some visitors still inadvertently hit it while keyboard-navigating the site with Taband Enter. Also, if they copy-paste the page into a word processor or e-mail software, for example, the trap link is copied along and sometimes even clickable (some software don't like empty
<a>tags and copy the href as the contents of the tag).Invisible blocks in the body:
<div style="display:none"><a href='/trap'><!-- nothing --></a></div>This fixes the problem with keyboard navigation, at least in the browsers I tested. The link is effectively inaccessible from the normal display of the page, while still fully visible to most spider bots with their current level of intelligence.
Problem:The link is still part of the DOM. If the user copy-paste the contents of the page, it reappears.
Inside comment blocks:
<!-- <a href='/trap'>trap</a> -->This effectively removes the link from the DOM of the page. Well, technically, the comment is still part of the DOM, but it achieves the desired effect that compliant user-agents won't generate the A element, so it is not an actual link.
Problem:Most spider bots nowadays are smart enough to parse (X)HTML and ignore comments. I've personally seen bots that use Internet Explorer COM/ActiveX objects to parse the (X)HTML and extract all links through XPath or Javascript. These types of bots are not tricked into following the trap hyperlink.
正文中的空链接：
<a href='/trap'><!-- nothing --></a>这在大多数情况下都非常有效，但有两个小问题：
问题：链接是文档正文的一部分。尽管用鼠标几乎无法点击它，但一些访问者在使用Tab和键盘导航网站时仍然不经意地点击了它Enter。此外，如果他们将页面复制粘贴到文字处理器或电子邮件软件中，例如，陷阱链接会被复制，有时甚至可以点击（有些软件不喜欢空
<a>标签，而是将 href 作为标签）。体内的隐形方块：
<div style="display:none"><a href='/trap'><!-- nothing --></a></div>这解决了键盘导航的问题，至少在我测试的浏览器中是这样。该链接实际上无法从页面的正常显示中访问，但对于大多数具有当前智能水平的蜘蛛机器人仍然完全可见。
问题：链接仍然是 DOM 的一部分。如果用户复制粘贴页面的内容，它会重新出现。
内部注释块：
<!-- <a href='/trap'>trap</a> -->这有效地从页面的 DOM 中删除了链接。好吧，从技术上讲，注释仍然是 DOM 的一部分，但是它达到了预期的效果，即合规的用户代理不会生成 A 元素，因此它不是实际链接。
问题：现在大多数蜘蛛机器人都足够聪明，可以解析 (X)HTML 并忽略注释。我个人见过使用 Internet Explorer COM/ActiveX 对象解析 (X)HTML 并通过 XPath 或 Javascript 提取所有链接的机器人。这些类型的机器人不会被诱骗跟踪陷阱超链接。
I was using method #3 until last night, when I was hit by a swarm of bots that seem to be really selective on which links they follow. Now I'm back to method #2, but I'm still looking for a more effective way.
我一直在使用方法#3 直到昨晚，当我被一群机器人攻击时，这些机器人似乎非常有选择性地选择他们遵循的链接。现在我又回到方法#2，但我仍在寻找更有效的方法。
Any suggestions, or another different solution that I missed?
我错过了任何建议或其他不同的解决方案？
回答by Sander Rijken
Add it like you said:
像你说的那样添加它：
<a id="trap" href='/trap'><!-- nothing --></a>
And then remove it with javascript/jQuery:
然后用 javascript/jQuery 删除它：
$('#trap').remove();
Spam bots won't execute the javascript and see the element, almost any browser will remove the element making it impossible to hit with tabbing to it
垃圾邮件机器人不会执行 javascript 并查看该元素，几乎所有浏览器都会删除该元素，从而无法通过 Tab 键点击该元素
Edit:The easiest non-jQuery way would be:
编辑：最简单的非 jQuery 方法是：
<div id="trapParent"><a id="trap" href='/trap'><!-- nothing --></a></div>
And then remove it with javascript:
然后用javascript删除它：
var parent = document.getElementById('trapParent');
var child = document.getElementById('trap');
parent.removeChild(child);
回答by cmptrwhz
this solution seems to work well for me, luckily i have bookmarked it. I hope it helps you as well.
这个解决方案似乎对我很有效，幸运的是我已经将它加入了书签。我希望它也能帮助你。
you can create a hidden link like this and put it at the very top left of your page and to prevent regular users from accessing it too easily you can use css to lay a logo image over this image.
您可以创建一个像这样的隐藏链接并将其放在页面的左上角，为了防止普通用户太容易访问它，您可以使用 css 在此图像上放置徽标图像。
<a href="/bottrap.php"><img src="images/pixel.gif" border="0" alt=" " width="1" height="1"></a>
if you are interested in setting up how to blacklist the bots refer to this link for detailed explaination of howto.
如果您有兴趣设置如何将机器人列入黑名单，请参阅此链接以获取有关 howto 的详细说明。
