如何使用JS做到页面关闭或跳转时的确认提示？

Question

假设我有个如下编写的内容写作组件：<form>  <label>编写文本处</label>  <textarea></textarea>  <input type="submit" value="提交" /></form>现在我想做到：当我关闭本窗口时会弹出提示“可能还有未保存的内容，是否确认离开”；当我刷新本页面时会弹出提示“可能还有未保存的内容，是否确认离开”；当我点击页面内其他链接时会弹出提示“可能还有未保存的内容，是否确认离开”；当我在地址栏输入链接跳转时会弹出提示“可能还有未保存的内容，是否确认离开”；当我点击提交按钮时提交成功，不需要弹出任何提示。

Answer 1

我试了一下，onbeforeunload在Chrome上是有效果的。实现1,2,3,4,5的完整效果要如下考虑：

  <form>

    <p>

      <label>标题</label>

      <input type="text" name="title" />

    </p>

    <textarea name="content"></textarea>

    <p>

      <input type="submit" value="提交" />

    </p>

  </form>

  <script>

    var formSubmitted = false;

    

    $("form").on("submit", function (e) {

        // 标记一个表单提交

        formSubmitted = true;

    });

    window.onbeforeunload = function () {

        // 只有在不是一个表单提交的时候，才会阻止跳转

        if (!formSubmitted) {

            return "您似乎有些数据没有保存";

        }

    };

  </script>