Javascript / Bootstrap：在 window.onbeforeunload 之前触发 Toast

Question

我有以下一小段 JavaScript 代码，它非常适合在有人可能离开表单时弹出警报，但不完整。但是，我尝试首先触发一个带有一些小的附加信息的 Toast，继续操作时所有工作都将丢失。

不过，我无法在窗口警报之前显示 Toast，因此它只会在窗口警报之后弹出。有什么方法可以解决这个问题？并不是说他们还必须与 Toast 进行交互；而是说他们必须与 Toast 进行交互。我只是想要屏幕右下角的小警报表明该进程将丢失。

<script>
window.onbeforeunload = () => {
    console.log(window.in_progress);
    const toastLiveExample = document.getElementById('liveToast')
    const toast = new bootstrap.Toast(toastLiveExample)
    toast.show()
    if(window.in_progress > 0){
        console.log(window.in_progress);
        return true;
    };   
};
</script>

Answer 1

我在您的代码中找不到

alert()

调用。尽管如此，您的问题可能是警报在 toast 动画之前出现，因此解决方案是在动画完成后触发警报。在代码中的某个位置添加以下代码片段（确保它只运行一次，因为每次调用时它都会向 toast 附加一个新的事件侦听器）：

toast.addEventListener('shown.bs.toast', () => {
  alert("Your alert text");
})