页面何时离开/卸载答案

【问题标题】：When is the page left/unloaded页面何时离开/卸载
【发布时间】：2015-12-15 01:43:19
【问题描述】：

我正在制定某人在某个 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 方法，如果有效，请告诉我。
不幸的是，根本没有任何变化......
好吧，我现在看到它实际上变得更糟了......现在根本没有调用 pageLeft-Function
任何特定的浏览器？还是全部还是他们？
不，我主要关注 Firefox。我认为某处必须是镀铬，但我几乎不使用它

标签： html forms jsp submit

【解决方案1】：

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

首先：在表单中添加一个在提交时调用的函数，也是一个变量来区分函数是否被调用。还将区间的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;
            }"

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

【讨论】：

【解决方案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");
}

【讨论】：

好吧，这看起来是一个干净的解决方案，但你对“更好”的定义是什么？
我的版本看起来更干净，这是我认为更好的版本。这就是这些活动的目的。