如何利用 HTML 规范中的 ping 属性实现在线运行代码中外链点击的静默监测-html教程-PHP中文网

ping属性在现代浏览器中基本失效，因chrome 98+默认禁用、firefox 100+完全移除、safari从未规范实现，且跨源限制严格；可靠替代是用fetch()+preventdefault()拦截点击并延后跳转。

如何利用 html 规范中的 ping 属性实现在线运行代码中外链点击的静默监测

ping 属性不能用于静默监测外链点击，它在现代浏览器中已被广泛禁用或降级，且根本无法满足“在线运行代码环境”下的实际监控需求。

为什么 `ping` 在线运行环境里基本失效

HTML 的 ping 属性本意是让浏览器在用户点击链接时向指定 URL 发送 POST 请求（类似 beacon），但现实是：

Chrome 从 98 版本起默认禁用 ping，除非页面启用 Permissions-Policy: ping 头，而在线代码环境（如 CodePen、JSFiddle、自建沙箱）几乎从不配置该头
Firefox 自 100+ 版本起完全移除 ping 支持，点击时直接忽略该属性
Safari 从未实现标准行为，部分版本会发出请求但不带 Referer 或 Origin，服务端难以验证来源
所有主流浏览器均禁止跨源 ping 到非同源地址（即你无法 ping 自己的监控服务，除非它和运行页同域）

真实可用的替代方案：用 `fetch()` + `preventDefault()` 拦截

在线运行环境能稳定捕获外链点击的唯一可靠方式，是劫持 a 标签的点击事件。前提是你的代码可控制 DOM（比如在 <script></script> 中注入逻辑）：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

document.addEventListener('click', function(e) {
  const link = e.target.closest('a[href]');
  if (!link || link.hasAttribute('data-no-monitor')) return;

  e.preventDefault();
  
  // 先发监控请求（注意：必须同源，或目标支持 CORS）
  fetch('/api/log-click', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      href: link.href,
      text: link.textContent.trim().slice(0, 100),
      timestamp: Date.now()
    })
  }).finally(() => {
    // 监控发完再跳转（避免被浏览器阻止）
    window.open(link.href, link.target || '_blank');
  });
});

关键点：