Question

在 Angular 4应用程序中，我正在处理一个API调用以保存有关浏览器关闭活动和刷新数据库的详细信息。我能够在API调用中成功并将这些详细信息保存在浏览器关闭或刷新活动中。 但无法区分这些事件是否由于浏览器关闭或刷新而发生。怎么处理？我在 app.component.ts 的hostlistener中的当前代码如下

@HostListener('window:beforeunload', ['$event'])
public beforeunloadHandler($event) {
    const browerLocation = $event.srcElement.location['href'];

    const browercloseinfo = {
        'ClientID': this.clientDetails.ClientID,
        'TestID': this.testData ? this.testData.TestID : 0,
        'BrowserLocation': browerLocation
    }

    if (this.router.url.indexOf('list') !== -1) {
        browercloseinfo.TestID = 0;
    } else {
        browercloseinfo.TestID = this.testData ? this.testData.TestID : 0;
    }

    const xmlhttp = new XMLHttpRequest();
    xmlhttp.open('POST', url,false); // False used for making call 
    synchronously 
    xmlhttp.setRequestHeader('Content-type', 'application/json');
    xmlhttp.send(JSON.stringify(browercloseinfo));
}

这些是我已经尝试过但在我的情况下无用的其他方法

 if (window.performance) {
     console.info("window.performance works fine on this browser");
 }
 if (performance.navigation.type == 1) {
    console.info( "This page is reloaded" );
} else {
    console.info( "This page is not reloaded");
}

虽然我已完成浏览器关闭或刷新

，但它仅在控制台上打印刷新事件

window.onbeforeunload = function (e)
{
   e = e || window.event;
   var y = e.pageY || e.clientY;
   if (y < 0) {
   console.log("Do You really Want to Close the window ?"
}
else {
  return "Refreshing this page can result in data loss."; 
  }
}

点击刷新或关闭时，它给出Y变量的未定义值。

请从我的第一个代码中帮助我。

Answer 1

您可以在SessionStorage中存储一个值，因为它会在浏览器刷新时保留，并在浏览器关闭时消失。然后，您可以检查该值是否存在

区分浏览器中的浏览器关闭和刷新事件？

1 个答案: