html如何获取手机短信内容

手机短信验证码的何获自动填充，是取手很多网页开发绕不开的坎。但不幸的机短是，浏览器里的信内JavaScript拿不到短信内容，这是何获硬性安全限制。你不可能像调接口一样直接读短信，取手除非你写的机短是一个安卓App，用系统权限去监听。信内可网页呢？何获网页跑在沙箱里，连短信权限的取手影子都摸不着。

那还有没有别的机短路？有，但都带点“曲线救国”的信内味儿。最主流的何获一种，是取手走WebOTP API。这个API是机短Chrome和Android上支持的，它能让浏览器在收到特定格式的短信时，主动把验证码“递”给网页。前提是短信内容得符合规范——格式类似Your code is 123456，后面还得跟一个@符号加你的域名，比如@example.com。这样浏览器才认，才会弹出一个“是否使用验证码”的提示，用户点一下，输入框就自动填上了。

代码长这样：

if ('OTPCredential' in window) {  navigator.credentials.get({  otp: {  transport: ['sms'] }, signal: abortController.signal }).then(otp => {  document.querySelector('input').value = otp.code; }).catch(err => {  // 用户取消或超时 }); }

这段代码放在页面加载时执行，浏览器会默默等短信。等到了，就弹窗询问；等不到，就拉倒。超时控制得你自己写，用AbortController掐掉请求，不然用户等久了会懵。

但这里有个坑——这玩意儿只支持HTTPS，而且对浏览器版本有要求。iPhone上的Safari直到iOS 16.4才支持，再早的版本直接白瞎。安卓上倒是好一点，Chrome从84就开始支持了。可你要是做个面向老年用户的网站，他们手机浏览器可能还停留在远古版本，这招就失灵了。

还有一条路，是配合原生App做中转。比如你的网页嵌套在某个App的WebView里，那App可以先拿到短信，再用JavaScript桥把验证码注入到页面。说白了就是App读短信，然后调window.postMessage或者注入一个全局函数，把验证码塞给网页。这种方法最灵活，但前提是你得有自己的App，而且用户得愿意装。没有App，这条路直接堵死。

再回头说说WebOTP的局限。它不光是兼容性问题，短信格式也得严格匹配。运营商或者短信服务商那边，如果发过来的内容带了个感叹号或者多了个空格，浏览器就不认了。我见过不少项目，短信模板里写了“验证码是123456，请勿泄露”，结果后面没跟@域名，前端怎么调都没反应。排查半天，最后发现是模板没改对，气死人。

所以我的建议是，别把宝全押在自动读取上。最稳的方案是：短信照发，用户手动输入，但输入框旁边加个“一键复制”按钮。很多手机短信App会识别验证码并给一个复制快捷键，用户点一下复制，再到网页里粘贴，体验也不差。你要是非想要自动填充，那就WebOTP做增强，不支持的环境就退回手动输入，别让功能变成用户的负担。

最后说个实际操作中的细节。WebOTP的请求必须由用户手势触发，不能页面一加载就自动调，否则浏览器会拒绝。你得在用户点击“获取验证码”按钮后，再发起navigator.credentials.get()。这个坑我踩过，第一次写的时候直接放在DOMContentLoaded里，结果Chrome报错说“没有用户激活”。改成按钮点击后再调，就顺了。

网页读短信，说到底是个半吊子功能。系统不给全权限，你就只能借API的边角料。能用就用，不能用就退，这比折腾一堆hack要实在得多。