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

Question

假设我有个如下编写的内容写作组件：

<form>

  <label>编写文本处</label>

  <textarea></textarea>

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

</form>

现在我想做到：

1. 当我关闭本窗口时会弹出提示“可能还有未保存的内容，是否确认离开”；

2. 当我刷新本页面时会弹出提示“可能还有未保存的内容，是否确认离开”；

3. 当我点击页面内其他链接时会弹出提示“可能还有未保存的内容，是否确认离开”；

4. 当我在地址栏输入链接跳转时会弹出提示“可能还有未保存的内容，是否确认离开”；

5. 当我点击提交按钮时提交成功，不需要弹出任何提示。

Answer 1

我试了一下，onbeforeunload在Chrome上是有效果的。实现1,2,3,4,5的完整效果要如下考虑：&nbsp; <form>&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; <label>标题</label>&nbsp; &nbsp; &nbsp; <input type="text" name="title" />&nbsp; &nbsp; </p>&nbsp; &nbsp; <textarea name="content"></textarea>&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; <input type="submit" value="提交" />&nbsp; &nbsp; </p>&nbsp; </form>&nbsp; <script>&nbsp; &nbsp; var formSubmitted = false;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $("form").on("submit", function (e) {&nbsp; &nbsp; &nbsp; &nbsp; // 标记一个表单提交&nbsp; &nbsp; &nbsp; &nbsp; formSubmitted = true;&nbsp; &nbsp; });&nbsp; &nbsp; window.onbeforeunload = function () {&nbsp; &nbsp; &nbsp; &nbsp; // 只有在不是一个表单提交的时候，才会阻止跳转&nbsp; &nbsp; &nbsp; &nbsp; if (!formSubmitted) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return "您似乎有些数据没有保存";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; </script>