Flask中如何在关闭浏览器标签页时触发函数？

这个功能必须通过前端JavaScript实现，Flask作为后端框架无法直接控制浏览器的关闭事件，但可以通过Flask渲染模板时嵌入JS代码来完成需求。以下是具体实现步骤：

核心思路 #

监听浏览器的beforeunload事件（触发场景包括关闭标签页、刷新页面、跳转其他链接），当检测到表单有未保存的更改时，阻止浏览器默认提示，转而显示你已制作好的自定义模态窗口，同时提供用户选择“留在页面”或“确认离开”的交互。

具体代码实现（结合Flask模板） #

假设你的Flask模板文件是form.html，将以下代码嵌入模板中（替换成你自己的模态窗口ID和表单选择器）：

<!-- 替换成你已制作好的模态窗口结构 -->
<div id="data-loss-modal" class="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center;">
  <div class="modal-content" style="background: white; padding: 2rem; border-radius: 8px;">
    <p>你输入的数据将会丢失，确定要离开吗？</p>
    <div style="margin-top: 1rem; display: flex; gap: 1rem;">
      <button id="stay-btn">留在页面</button>
      <button id="leave-btn">确认离开</button>
    </div>
  </div>
</div>

<script>
// 标记是否存在未保存的表单修改
let hasUnsavedChanges = false;

// 监听表单输入，只要用户修改内容就标记状态
document.querySelector('form').addEventListener('input', () => {
  hasUnsavedChanges = true;
});

// 标记用户是否确认离开页面
let userConfirmedLeave = false;

// 监听浏览器关闭/刷新事件
window.addEventListener('beforeunload', (event) => {
  if (hasUnsavedChanges && !userConfirmedLeave) {
    // 阻止浏览器默认的提示弹窗
    event.preventDefault();
    // 显示自定义模态窗口
    document.getElementById('data-loss-modal').style.display = 'flex';
    // 部分浏览器需要返回空值来触发提示，兼容处理
    event.returnValue = '';
  }
});

// 处理「留在页面」按钮点击
document.getElementById('stay-btn').addEventListener('click', () => {
  document.getElementById('data-loss-modal').style.display = 'none';
  userConfirmedLeave = false;
});

// 处理「确认离开」按钮点击
document.getElementById('leave-btn').addEventListener('click', () => {
  userConfirmedLeave = true;
  document.getElementById('data-loss-modal').style.display = 'none';
  // 允许浏览器执行原本的关闭/刷新操作
  window.close(); // 针对关闭标签页场景，若是刷新可改用window.location.reload()
});
</script>

补充说明 #

1. 表单提交后的状态重置：如果你的表单是通过常规提交或AJAX提交，在提交成功后需要将hasUnsavedChanges设为false，避免用户提交完成后关闭页面仍弹出警告。
2. 浏览器兼容：部分现代浏览器对beforeunload的自定义内容有严格限制，可能会同时显示浏览器自带提示和你的模态窗口，这是浏览器的安全机制，无法完全规避。
3. 样式调整：示例中的模态窗口基础样式仅作演示，你可以替换成自己已实现的模态窗口样式。

内容的提问来源于stack exchange，提问作者Mr Ender