如何检测mailto事件已触发？iframe调用邮件客户端场景

嘿，这个问题我之前也碰到过！确实，mailto:协议加载到iframe里时，浏览器不会触发onload事件——因为它并没有真正加载一个网页资源，而是直接唤起本地的邮件客户端，iframe本质上没有完成“页面加载”这个流程。

给你几个可行的思路和替代方案：

1. 试试监听beforeunload事件 #

有些浏览器会在iframe尝试加载mailto:链接时触发beforeunload（虽然兼容性不是100%，但可以一试）。代码可以这么写：

var body = document.querySelector("#body");
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "mailto:sample@email.com";

iframe.addEventListener('beforeunload', function() {
    console.log('邮件客户端唤起操作已触发');
    // 这里可以加你需要的后续逻辑
    body.removeChild(iframe); // 用完记得移除iframe
});

body.appendChild(iframe);

2. 用定时器做“推测性”处理 #

因为唤起邮件客户端的操作很快就能完成（不管成功还是失败），你可以设置一个短定时器，来执行后续逻辑：

var body = document.querySelector("#body");
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "mailto:sample@email.com";
body.appendChild(iframe);

setTimeout(function() {
    console.log('邮件客户端唤起尝试已完成');
    body.removeChild(iframe);
    // 这里处理你需要的后续步骤
}, 500); // 时间可以根据实际情况调整，比如300-1000ms都可以

3. 换个思路：用隐藏的<a>标签代替iframe #

其实还有更简单的方法，完全不需要iframe——用隐藏的锚点标签模拟点击，同样不会修改当前页面的location：

var mailLink = document.createElement('a');
mailLink.href = 'mailto:sample@email.com';
mailLink.style.display = 'none';
document.body.appendChild(mailLink);
mailLink.click();
document.body.removeChild(mailLink);

这种方式兼容性更好，也不用纠结事件触发的问题。不过要注意：浏览器没有提供API能让我们准确知道邮件客户端是否真的被唤起了，所以如果你的逻辑依赖操作成功，最好给用户加个提示，比如“请检查你的邮件客户端是否正常打开”。

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