当用户关闭选项卡时,我想DELETE
通过Javascript发送AJAX请求。流程如下:
当用户尝试关闭选项卡时,onbeforeunload
将发生一个事件,然后,如果用户确认离开页面,则该onunload
事件将发生并尝试执行该deleteRequest
功能,这是一个synchronous ajax delete
请求。
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
window.onunload = function(){
deleteRequest();
};
function deleteRequest(){
let url = new URL("http://......");
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
if(request.readyState == 4){
if(request.status === 200){
console.log('success');
}
}
}
request.open("DELETE", url, false);
try{
request.send();
}
catch(e){
console.log(e);
}
}
不幸的是,似乎Google Chrome
并没有因为当某个标签页关闭它杀死所有的未决事件不再对此表示支持,并在浏览器的控制台,我可以看到下面的消息
DOMException:无法在'XMLHttpRequest'上执行'send':无法加载'http:// .....':页面关闭时同步XHR。有关更多详细信息,请参见https://www.chromestatus.com/feature/4664843055398912。在window.onunload的deletRequest(....... js:411:17)
请注意,我之前在SO上已经看过许多关于此问题的主题,但是解决方案并没有真正帮助,因为大多数解决方案已经过时,因为chrome的相关政策最近发生了变化,例如this或this。
似乎大多数人都建议navigator.sendBeacon
实现此目标,但是在文档中,我仅看到POST
使用此请求的方法,有什么想法吗?提前致谢。
就sendBeacon
开箱即用而言,您几乎是SOL ,PUT
并且DELETE
不能像您观察到的那样发送(仅POST
)。对于您来说XMLHttpRequest
,Chrome非常明确地说:“嘿,beforeunload
如果您使用no-op循环,我们通常会在其中发送这些同步XHR请求,但我们不再支持它”:
无法在页面关闭中对“ XMLHttpRequest”同步XHR执行“发送”。
Chrome故意禁止这种行为。除了修改后端外,您别无选择,例如,设置一个将接收sendBeacon
POST
请求https://example.com/trigger-delete/
并DELETE
从后端触发呼叫的端点,或者,如果不是您的服务器,则实际上必须设置一个您控制的中继服务器来接收POST(https://myrelay.com/forward-delete/)
然后作为一个DELETE
。
sendBeacon
据我所知,这是摆脱这种情况的唯一方法。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句