企业官网建设流程全解析

在郑州做网站,西安网是科技发展有限公司,免费的公司网站怎么做,上传WordPress后就403了navigator.sendBeacon() 是现代浏览器提供的一个 API#xff0c;用于在页面卸载#xff08;如关闭标签页、导航到其他页面#xff09;时#xff0c;异步且可靠地向服务器发送少量数据#xff08;如日志、分析数据等#xff09;。它解决了传统 XMLHttpRequest 或 fetch 在…navigator.sendBeacon() 是现代浏览器提供的一个 API用于在页面卸载如关闭标签页、导航到其他页面时异步且可靠地向服务器发送少量数据如日志、分析数据等。它解决了传统 XMLHttpRequest 或 fetch 在页面卸载时可能因浏览器终止任务而失败的问题。1. 核心特性异步发送数据发送不会阻塞页面卸载流程适合在 beforeunload、unload 等事件中发送数据。可靠性浏览器会确保数据在后台发送即使页面已卸载也会尝试完成传输除非浏览器被强制关闭。轻量级仅支持发送少量数据通常限制为几 KB格式为 Blob、FormData、ArrayBuffer 或字符串。无响应处理该方法返回 boolean表示浏览器是否接受请求但不会返回服务器响应设计初衷是单向通信。2. 语法constsuccessnavigator.sendBeacon(url,data);url目标服务器地址必须同源或支持 CORS。data要发送的数据可选可以是 Blob、FormData、ArrayBuffer 或字符串。返回值true 表示浏览器已接受请求false 表示失败如数据过大或浏览器不支持。3. 使用场景页面关闭时发送分析数据例如记录用户停留时间、最后操作等window.addEventListener(beforeunload,(){constdataJSON.stringify({event:page_close,time:Date.now()});navigator.sendBeacon(/analytics,data);});提交表单数据在卸载前发送用户输入需配合 FormDataconstformDatanewFormData();formData.append(feedback,User comment...);navigator.sendBeacon(/submit,formData);4. 注意事项数据大小限制不同浏览器限制不同通常 64KB 左右超限会返回 false。CORS 配置目标 URL 需支持 CORS尤其是跨域请求时。无回调机制如需确认服务器是否收到数据需通过其他方式如后续请求或 WebSocket。兼容性现代浏览器均支持但旧版 IE 不兼容可用 navigator.sendBeacon 存在性检测。5. 与替代方案对比方法阻塞页面卸载可靠性数据大小适用场景sendBeacon❌ 不阻塞✅ 高小页面卸载时发送数据fetch/XMLHttpRequest✅ 阻塞❌ 低大实时交互如 AJAXImage 对象❌ 不阻塞❌ 低小简单跟踪如埋点示例代码// 发送 JSON 数据constdatanewBlob([JSON.stringify({key:value})],{type:application/json});constsuccessnavigator.sendBeacon(https://example.com/log,data);if(success){console.log(Beacon queued successfully.);}else{console.error(Failed to send beacon (data too large or unsupported).);}6. 总结navigator.sendBeacon() 是处理页面卸载时数据上报的最佳实践尤其适合日志、埋点等场景。它的异步非阻塞特性和高可靠性使其成为传统方法的理想替代方案。使用时需注意数据大小和兼容性并避免依赖其响应结果。