Fatal编程技术网
  • javascript/
  • Javascript 使用innerHTML替换元素内容时避免闪烁

Javascript 使用innerHTML替换元素内容时避免闪烁

javascript html css

Javascript 使用innerHTML替换元素内容时避免闪烁,javascript,html,css,Javascript,Html,Css,我在我的网站上有类似的东西，让垃圾邮件收割机的工作变得更加困难。默认情况下，该站点显示“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/javasc

我在我的网站上有类似的东西，让垃圾邮件收割机的工作变得更加困难。默认情况下，该站点显示“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>

noob（at）me（dot）com
document.getElementById（'email'）.innerHTML=emailProducingFunction（）；
这很有效。然而，问题是，有时候，原始文本会在JS转换为真实电子邮件之前的一瞬间显示出来，在加载站点时会产生短暂的“闪烁”效果

有可能以某种方式避免这种情况吗

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

我可以提出一些其他不受相同现象影响的建议，而不是解决您的闪烁问题

电子邮件混淆的替代方案 您是否考虑过有价值的替代方案，比如反转电子邮件地址，然后使用CSS正确显示它们，而不是减少闪烁？这项技术在屏幕阅读器和拷贝粘贴方面可能不是最好的，但还有其他值得使用的技术，其工作原理与您的不同

这个答案总结了不同的电子邮件混淆技术。CSS反转似乎是最有效的方法之一

使用CSS反转和可点击/选择 因此，您的技术将使用Javascript替换页面上加载的所有电子邮件。CSS解决方案正确地显示反向电子邮件，但如果用户单击此类电子邮件或选择它（复制），他们会得到一封反向电子邮件

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

我想说的是，即使使用CSS模糊处理，也不能降低他们网站的可用性。仍然可以这样做。

当页面开始加载时，您可以将
js
类添加到
body
元素中：

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


document.body.className+=“js”；
body.js#电子邮件{显示：无；}
因此，确保“模糊”地址仅显示给“非JS”用户。

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

<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>


noob（at）me（dot）com
document.getElementById（'email'）.innerHTML=emailProducingFunction（）；
之所以会出现这种闪烁，是因为显示了原始地址，加载了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>


document.addEventListener（'DOMContentLoaded'，function（）{
document.getElementById（'email'）.innerHTML=emailProducingFunction（）；
}，假）；
noob（at）me（dot）com
以下是一些关于：

先不显示电子邮件地址，然后插入正确的电子邮件地址如何？据我所知，这只是一个虚拟的邮件地址……大多数邮件清理者都知道这种混淆，解决这一问题没有问题。您是否尝试过使用您最喜欢的JavaScript库中的DOMReady钩子将脚本加载到文档的
头
？这可能有效。如果此解决方案需要与JS禁用的网站一起使用，您将如何替换电子邮件？设置
display:none
如果JS被禁用，那么
noob（at）me（dot）com
无论如何都应该被隐藏。这项研究没有考虑用户体验，在这个问题中暴露的解决方案会更好；此外，使用JS解决方案时收到的垃圾邮件数量非常少。@JulienRoyer:我更新了我的答案以说明这一事实。你说的当然是真的，但我并不是只针对一种技术。在另一个超级用户问题中，我指出了其他一些可以用来满足他们需求的问题。@JulienRoyer:有趣的是。。。世界上最大的网站之一（Facebook）使用了一种完全不同的可用性差的技术，将电子邮件更改为图像。如果它对他们有效，我不知道为什么电子邮件反向不应该对我们有效。你还必须问自己这个问题：你的网站有多少屏幕阅读器用户？如果你有一个新闻网站，那么应该考虑这一点，但是如果你发布的是与开发相关的内容，那么你可能会忘记这一点……我同意，在做出选择之前，应该研究所有可用的解决方案。我喜欢模糊化的/JS解决方案，因为它似乎是一个很好的折衷方案。至于Facebook使用的图像解决方案，它需要一个能够生成非OCR图像的复杂库；此外，它的问题不仅限于屏幕阅读器：复制粘贴也是一个问题。@JulienRoyer:Email harvester机器人对于OCR图像来说太笨了。如果他们不能阅读CSS反向邮件，我打赌他们也不会阅读图像；这是一个JS问题。在javascript修改之前，它会显示默认输出。