问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
run27017
    10137

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

    <form>
  <label>编写文本处</label>
  <textarea></textarea>
  <input type="submit" value="提交" />
</form>

    现在我想做到：

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

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

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

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

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

    javascripthtml
    阅读 10.1k
    4 个回答
    得票最新
    头像
    run27017
      10137
      ✓ 已被采纳

      我试了一下，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>
      头像
      一個路人
        264817
        头像
        lejoy
          2.2k2818

          似乎不太好区分 浏览器关闭、页面刷新，并且不同浏览器机制还不一样。
          window.onbeforeunload() 两个事件都能捕获到。

          头像
          Timdu
            2696

            你可以监听 window.onbeforeunload 事件。sample code如下

            <HTML>
<head>
<script>
function closeIt()
{
  return "Any string value here forces a dialog box to \n" + 
         "appear before closing the window.";
}
window.onbeforeunload = closeIt;
</script>
</head>
<body>
  <a href="http://www.microsoft.com">Click here to navigate to 
      www.microsoft.com</a>
</body>
</html>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题
            宣传栏