页面是什么时候left/unloaded

When is the page left/unloaded

我正在记录某人在某个 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 个条目。

我该怎么办?

不幸的是 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;
            }"

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

这种方式似乎更好。我可以让 onbeforeunloadonunload 在 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");
}