3

我的网站上有类似的东西，让垃圾邮件收割者的事情变得更加困难。默认情况下，该站点显示“noob (at) me (dot) com”，但随后 JavaScript 会将此文本替换为实际的电子邮件地址。

<span id="email">noob (at) me (dot) com</span>

<script type="text/javascript" src="email.js"></script>
<script type="text/javascript">
  document.getElementById('email').innerHTML = emailProducingFunction();
</script>

这行得通。然而，问题是有时，在 JS 转向真正的电子邮件之前，原始文本会显示一瞬间，导致网站加载时出现短暂的“闪烁”效果。

是否有可能以某种方式避免这种情况？

一种“解决方案”是使用 CSS 隐藏 email 元素，然后使用 JS 使其不隐藏。但是，这不是一个好的解决方案，因为该站点还应该与启用 CSS 但禁用 JS 的浏览器兼容。

4

5 回答 5

4

除了解决您闪烁的问题之外，我还可以提出其他不受相同现象影响的方法。

电子邮件混淆的替代方案

除了减轻闪烁之外，您是否考虑过有价值的替代方案，例如反转电子邮件地址，然后使用 CSS 正确显示它们？这种技术在屏幕阅读器和复制粘贴方面可能不是最好的，但还有其他值得使用的技术与您的工作方式不同。

在超级用户上检查这个答案

这个答案总结了这项关于不同电子邮件混淆技术的研究。CSS 反转似乎是最有效的一种。

使用 CSS 反转和可点击性/选择

因此，您的技术在使用 Javascript 加载时替换了您页面上的所有电子邮件。CSS 解决方案正确显示反向电子邮件，但如果随后单击此类电子邮件或选择它（用于复制），他们将收到一封反向电子邮件。

因此，使用 CSS 和改进这些日常场景可以通过使用 javascript 来完成，这与您的解决方案类似，只是它仅按需执行（并不总是像您的情况那样）。将单击/选择事件附加到元素并在需要时反转其内容很容易。

我想说的是，即使使用 CSS 混淆，也不会降低其网站的可用性。它仍然可以完成。

于 2012-11-12T10:36:50.577 回答
2

发生这种闪烁是因为显示了原始地址，加载了 email.js 脚本，然后应用了函数。文件加载+函数执行为闪烁的发生留下了足够的时间。

解决方案是在显示原始地址之前放置脚本标签。但是，如果您只是尝试使用 #email 元素，则会收到错误消息，因为它不存在。所以你可以使用DOMContentLoaded事件来等待元素存在。（$(document).ready()如果你习惯了 jQuery。）

使用这种方式，不会有任何闪烁。

例子：

<script src="email.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('email').innerHTML = emailProducingFunction();
}, false);
</script>

<span id="email">noob (at) me (dot) com</span>
于 2012-11-12T10:42:57.713 回答
1

当页面开始加载时，您可以向元素添加一个js类：body

<body>
  <script>document.body.className += " js";</script>
  <style>body.js #email {display: none;}</style>

从而确保“混淆”地址仅显示给“非 JS”用户。

于 2012-11-12T10:37:34.713 回答
0

将<script>元素移动到电子邮件元素之前：

<script type="text/javascript" src="email.js"></script>

<span id="email">noob (at) me (dot) com</span>

<script type="text/javascript">
  document.getElementById('email').innerHTML = emailProducingFunction();
</script>
于 2012-11-12T10:42:51.240 回答