如何使用JavaScript隐藏邮箱并实现mailto功能？

用户现有代码 #

JavaScript代码 #

let user = 'larr';
let domain = 'outlook.com';
let send = 'ilt';

document.getElementById("bots").href = "ma" + send + "o:" + user + "@" + domain;

HTML代码 #

<a id="bots"> <img src="imgs/pic.jpg"> </a>

问题分析 #

你的代码逻辑本身是对的（拼接后会得到mailto:larr@outlook.com），大概率是JavaScript执行时机不对导致的问题：如果JS代码在<a id="bots">元素之前加载执行，此时DOM中还不存在这个元素，document.getElementById("bots")会返回null，自然无法设置href属性。

修复方案 #

方案1：将JS放在DOM元素之后 #

把脚本移到HTML内容的底部，确保DOM元素已经加载完成后再执行代码：

<a id="bots"> <img src="imgs/pic.jpg"> </a>

<script>
let user = 'larr';
let domain = 'outlook.com';
let send = 'ilt';

document.getElementById("bots").href = "ma" + send + "o:" + user + "@" + domain;
</script>

方案2：监听DOM加载完成事件 #

如果必须把JS代码放在页面头部，可以通过DOMContentLoaded事件监听，确保DOM完全加载后再执行逻辑：

document.addEventListener('DOMContentLoaded', function() {
  let user = 'larr';
  let domain = 'outlook.com';
  let send = 'ilt';

  document.getElementById("bots").href = "ma" + send + "o:" + user + "@" + domain;
});

进阶防爬虫优化 #

如果想进一步提升邮箱地址的防爬效果，可以尝试这些方式：

• 拆分更多关键字符，比如把@用ASCII编码生成：let at = String.fromCharCode(64);，拼接时替换为user + at + domain
• 点击链接时再动态生成href，避免页面加载时就暴露完整链接：

<a id="bots" onclick="this.href = 'ma' + 'ilt' + 'o:' + 'larr' + '@' + 'outlook.com'">
  <img src="imgs/pic.jpg">
</a>

内容的提问来源于stack exchange，提问作者springfed