Question

我正在协议某人留在某个jsp页面的时间，因此我在body标签中调用了三个函数：

<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看起来也不太有希望（但我没试过），但我有另一个想法：

首先：添加一个在提交给表单时调用的函数，也是一个变量来区分函数是否被调用。同时在变量intervalid中保存间隔的ID（参见：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");
}

页面何时离开/卸载

2 个答案: