HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>beacon on hidden</title>
  <style>
    #out { white-space: pre-wrap; border: 1px solid #ccc; padding: 10px; }
  </style>
</head>
<body>
  <p>Leave this tab to simulate an analytics sendBeacon call.</p>
  <pre id="out">Visible — waiting for hidden…</pre>
  <script>
    var out = document.getElementById("out");
    var analyticsData = "session=demo&action=leave";
    document.onvisibilitychange = function () {
      if (document.visibilityState === "hidden") {
        // Real apps: navigator.sendBeacon("/log", analyticsData);
        out.textContent =
          "Would sendBeacon with: " + analyticsData +
          "\nat " + new Date().toLocaleTimeString();
      } else {
        out.textContent = "Visible again — session continuing";
      }
    };
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Document visibilitychange — sendBeacon on hidden (Try It)