页面是什么时候left/unloaded

Question

我正在记录某人在某个 jsp 页面停留的时间，所以我在我的 body-tag 中调用了三个函数：

<body onunload="pageLeft();" onload="pageEnter(); startInterval();">

pageEnter 向服务器发送 ajax 请求，其中包含页面 ID 和“1”表示页面输入。

startInterval 开始一个间隔并每隔几秒向服务器发送一个 ajax-请求，其中包含一个“2”表示仍然存在。

pageLeft ajax 发送“3”所以我知道用户已经离开了页面。

最重要的是“1”和“3”，它们用于对所有协议数据进行分组。

页面上还有一个带有提交按钮的表单：

<form action="/UpdateDB/Customers.jsp" method="POST" name="Custpost">

我的意图是在卸载当前页面并加载 Customers.jsp 之后将表单数据传输到 Customers.jsp。我所有使 Customers.jsp 中的程序工作的试验都失败了，现在我找到了原因：

在数据库中只有 1s 和 2s 而没有 3。这意味着当前页面从未被卸载 - 但程序已经开始...

我考虑过在 Customers.jsp 中手动设置 3 个条目，但这会在数据库中留下两个这样的条目。此外，如果用户只是离开页面，则根本不会留下任何 3 个条目。

我该怎么办？

Answer 1

不幸的是 onbeforeunload 没有按预期工作 - 替换后没有调用任何东西。 onbeforesubmit 看起来也不太乐观（但我没试过），但我有另一个想法：

第一：在表单中添加一个提交时调用的Function，以及一个变量来区分该函数是否被调用。还将间隔的ID保存在变量intervalid中（参见：Stop setInterval call in JavaScript）：

var nosubmit = true;

        $(function () {
            $('#Custpostform').submit(function () {
                if (nosubmit) {
                    pageLeft();
                    clearInterval(intervalid);
                    nosubmit = false;
                    return true; // return false to cancel form action
                }
            });
        });

<!-- -->

<form action="/UpdateDB/Customers.jsp" method="POST" name="Custpost" name="Custpostform">

其余部分基本保持不变，只是 onunload 现在略有修改：

<body onunload="if (nosubmit) {
                pageLeft();
                nosubmit = false;
            }"

这不是我预期的真正解决方案，但它按预期工作

Answer 2

这种方式似乎更好。我可以让 onbeforeunload 和 onunload 在 Chrome 和 Firefox 中工作（我没有测试任何其他的）。

请参阅 the fiddle 了解互动版本。

HTML:

<body onload="testLoad()" onunload="testUnload()" onbeforeunload="return testBeforeUnload()">

</body>

JS:

function testBeforeUnload() {
  return "test before unload event";
}
function testUnload() {
  console.log("test unload event");
}

页面是什么时候left/unloaded

When is the page left/unloaded

html

forms

jsp

submit