离开页面时Js弹出但提交表单时不弹出

Question

当用户试图离开页面时，我在我的网站上使用此代码在弹出窗口中显示警告消息：

<script type="text/javascript">
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {

    return "Si vous quittez ou actualisez la page, vous perdrez votre tutoriel";
  }
</script>

但是，这是在带有表单的页面上。当用户提交表单时，会出现没有意义的弹出窗口。我如何修改此代码，以便仅当用户以各种可能的方式离开页面时（关闭选项卡、单击站点徽标、刷新页面）而不是在提交表单时弹出窗口出现？

Answer 1

我建议捕获表单的提交事件，然后从 onbeforeunload 事件绑定中删除 confirmExit 函数，或者设置一个标志以指示可以提交页面。例如：

<script type="text/javascript">

    // Define flag to determine if the page can be left without confirmation
    var safeToLeave = false;

    // Handle user leaving the page
    function handleExit () {
        if (!safeToLeave) {
            return 'Si vous quittez ou actualisez la page, vous perdrez votre tutoriel';
        }
    }

    // Handle the user submitting the page form
    function handleSubmission() {
        safeToLeave = true;
    }

    // Bind to on evemts
    window.onbeforeunload = handleExit;
    document.getElementById('#my-form').onsubmit = handleSubmission;

</script>

我建议您通常考虑使用 addEventListener 方法来绑定事件，但是考虑到您的示例，我尽量使我的回答保持一致。

离开页面时Js弹出但提交表单时不弹出

Js popup when leaving page but not when submitting form

javascript

popup