标签: sendbeacon

在beforeunload处理程序的上下文中，标记fetch(keep-alive: true)的src属性和设置img标记的属性之间的功能区别是什么？哪些是发出GET请求的首选方法？

背景：

我想beforeunload在JavaScript代码的处理程序中发送HTTP GET请求。Navigator.sendBeacon的文档讨论了此用例的优点，但是

sendBeacon（）方法不提供自定义请求方法的功能

显然，几年前对此类功能的请求很多，最终提出了对use 的推荐，即使用fetch()内部调用by的浏览器方法sendBeacon，并设置了一些特定的标志来解决unload请求问题：

需要此类请求的非默认设置的应用程序应使用将FETCHkeep-alive标志设置为true 的API

fetch(url, {
  method: ..., 
  body: ...,            
  headers: ...,       
  credentials: 'include',
  mode: 'cors',
  keep-alive: true,
})

据我所知，这种调用在功能上等效于Navigator.sendBeacon，键设置为keep-alive: true。

显然，HTML <img>标签也 采用keep-alive: true根据规范（重点煤矿）：

请求具有关联的keepalive标志...该标志可用于允许请求超过环境设置对象的寿命，例如，navigator.sendBeacon和HTML img元素设置此标志

我本文档的理解是，制作GET上要求unload通过img元素的src属性在功能上等同于调用fetch() …

我目前正在尝试让 Angular 应用程序在用户尝试离开我的页面时进行 API 服务调用。通过关闭选项卡/窗口，或输入外部 URL。

我已经尝试实现几种不同的方法，我在这里看到的关于计算器溢出问题的描述，但似乎都没有达到预期的效果。有些人提到了同步 ajax 请求，这些请求已经或正在被 Chrome 上的 onbeforeunload 弃用。其他人建议使用 XMLHttpRequests，它们似乎遭受了同样的命运。我曾尝试@HostListener('window:onbeforeunload', ['$event'])在 HTML 中使用 , 和等价物(window:beforeunload)="doBeforeUnload($event)"，但都拒绝合作。我可以让 console.logs 显示出来，但 API 永远不会收到任何注销用户的调用。我也使用过navigator.sendBeacon，尽管它的函数返回 true，表明作业已发送到浏览器队列，但什么也没有实现。

目前，注销功能是这样的：

userLogout(): Observable<any> {
    return this.apiService.get('/Account/Logout/');
  }

反过来，它是一个通用的 http get 函数：

get<T>(url: string, options?: { params: HttpParams }): Observable<any> {
    return this.httpRequest<T>('get', url, null, options ? options.params : null);
  }

使用 HttpInterceptor 添加完整 url。注销功能本身正在工作，因为它用于菜单选项，手动使用时按预期工作。所以函数应该不是问题。

我试图做的就是以同步或异步方式调用 userLogout 函数，并通知后端用户已离开。

我一直在尝试发送信标 beforeunload，它似乎适用于几乎所有现代浏览器，除了处于隐身模式的 Chrome。

这是适用于所有现代浏览器的代码，除了处于隐身模式的 Chrome：

window.onbeforeunload = function() {
    navigator.sendBeacon("url");
}

甚至这段代码似乎都不起作用：

window.onbeforeunload = function() { 
    console.log('before unload') 
}

我做错了什么还是只是 Chrome 的错？

我试图在窗口关闭时发送数据，以防止 2 个人编辑和覆盖彼此的数据。目前我在卸载事件处理程序中使用 sendBeacon。

火狐：

• 刷新：有效
• 后退按钮：有效
• 关闭窗口：作品

铬合金：

• 刷新：有效
• 后退按钮：有效
• 关闭窗口：不起作用

这是我的代码

function sendDataOnClose(edit,trans){

    var url = "../../save.php"; //This has a post request handler and works properly with other functions for saving data

    const data = JSON.stringify
    ({
      "translations": trans,
      "edit": edit
    });

    navigator.sendBeacon(url, data);
  }

function handleClose(){
    if(edit){
      console.log("sending a false when edit is: "+ edit)
      sendDataOnClose(false, translations);
    }
  }

window.addEventListener('unload', handleClose);