什么是 ping 属性，它真能发请求吗
是的，ping 属性会让浏览器在用户点击 <a></a> 标签时，**异步发送一个 POST 请求**到指定 URL（不等待响应，不阻塞跳转），常用于无感埋点。但它有硬性限制：只支持同源 URL 或开启了 Access-Control-Allow-Origin 的跨域目标，且浏览器必须支持 —— Chrome 89+、Edge 90+、Firefox 105+ 支持，Safari **至今不支持**（截至 Safari 17.6）。
常见错误现象：Failed to execute 'ping' on 'HTMLAnchorElement': The target origin is not the same as the current origin and no CORS header is present，本质是跨域且目标没配 CORS。
- 必须用
<a href="https://example.com">跳转</a>形式，javascript:void(0)或onclick绑定无效 -
ping值只能是单个 URL 字符串，不能写多个（如ping="a.com b.com"会直接被忽略） - 请求体为空，HTTP 方法固定为 POST，无法自定义 header 或 body
怎么正确设置 ping 属性并验证是否发出
直接在 <a></a> 标签里加 ping 属性即可，但要注意路径和协议：
<a href="https://target-page.com" ping="https://analytics.example.com/click?tid=abc123">立即查看</a>
验证是否生效，打开 DevTools → Network 面板，筛选 XHR 或 Other，点击链接后看是否有对应请求发出（状态码通常是 204 或 200，响应体为空）。注意：该请求不会出现在 Fetch/XHR 分类下，有时归在 Other，需留意时间戳是否紧贴点击时刻。
- 如果目标 URL 是相对路径（如
ping="/log/click"），它会相对于当前页面 origin 解析，不是相对于href - 确保目标服务能接收空 body 的 POST，并返回 2xx（推荐 204 No Content）
- 不要依赖
ping做关键日志（如支付成功），它可能被拦截、失败或静默丢弃
为什么点击后没发请求？排查这几点
最常见原因不是代码写错，而是环境或配置卡住：
- 当前页面是
file://协议（本地双击 HTML）——ping在非 HTTP(S) 环境下完全禁用 - 目标 URL 协议与当前页不一致（比如页面是
https，ping写了http）—— 混合内容被浏览器阻止 - 浏览器扩展（如广告屏蔽器、隐私插件）主动过滤了带
ping的请求，可尝试无痕模式复现 - 服务器返回了非 2xx 状态码（如 403/500），部分浏览器会记录警告但不报错，Network 面板里能看到失败请求
替代方案：当 ping 不可用或需更多控制时
如果要兼容 Safari、需要携带自定义参数、或必须确保送达，就得绕开 ping。典型做法是监听 click，用 fetch() 发请求，再延迟跳转：
document.querySelector('a[data-track]').addEventListener('click', function(e) {
e.preventDefault();
const url = this.href;
const pingUrl = this.dataset.ping;
fetch(pingUrl, { method: 'POST', keepalive: true })
.finally(() => window.location.href = url);
});
重点用 keepalive: true 确保页面卸载前发完请求；data-ping 存地址避免污染标准属性。但这会略微延迟跳转（毫秒级），且需自行处理并发、失败重试等逻辑。
真正容易被忽略的是：即使用了 ping，它也只在「用户真实点击」时触发，不会响应 click() 脚本调用或键盘回车激活 —— 如果你的交互支持键盘访问（Accessibility），这点必须额外补全逻辑。
