页面是什么时候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;
}"
这不是我预期的真正解决方案,但它按预期工作
这种方式似乎更好。我可以让 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");
}
我正在记录某人在某个 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;
}"
这不是我预期的真正解决方案,但它按预期工作
这种方式似乎更好。我可以让 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");
}