JavaScript-在选项卡关闭时发送AJAX调用(删除请求)

尼克·阿斯

当用户关闭选项卡时,我想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的相关政策最近发生了变化,例如thisthis

似乎大多数人都建议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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

再次单击时关闭javascript选项卡

Javascript:切换选项卡时关闭警报框

仅当用户实际关闭选项卡时,我如何运行 Javascript 代码?

JavaScript浏览器关闭事件(“ nob”选项卡)

JavaScript 以编程方式强制关闭选项卡?

Javascript 功能未关闭打开的选项卡

单击动态选项卡上的调用Javascript函数

Javascript调用无效的Bootstrap选项卡内容

Bootstrap 4 选项卡和 ajax javascript 错误

Javascript或angularjs推迟刷新之间的浏览器关闭或选项卡关闭

如何在 2021 年检测使用 javascript 关闭的选项卡?

Javascript在浏览器/选项卡上显示设计的元素关闭

如何在 javascript 中关闭/隐藏 html 导航选项卡?

javascript选项卡以显示相同的信息

Javascript 在选项卡之间共享 sessionStorage

删除选项卡时无法关闭工作表

删除所有选项卡上选项卡关闭时的sessionStorage属性

如何将 JavaScript 发送到 Chrome 扩展程序中的特定选项卡?

通过javascript调用激活选项卡(从无序列表创建)

防止用户在多个选项卡中运行相同的 javascript 调用的最佳方法是什么?

用于删除mysql数据的Javascript警报在新选项卡中打开

使用JavaScript进行选项卡和删除在Mozilla中不起作用

打开嵌套选项卡时选项卡关闭

导航到其他选项卡时,JavaScript提示窗口消失

如何通过JavaScript使用启动选项卡来激活选项卡提交哪种表单

用于获取从当前选项卡启动的选项卡 URL 的 JavaScript 书签代码

Javascript 选项卡使用数据属性而不是 ID 来链接按钮和选项卡

Javascript:如何显示默认选项卡内容但隐藏其他选项卡内容

JavaScript在新窗口中打开,而不是选项卡