如何在window.onbeforeunload触发前显示Toast提示？

问题出在window.onbeforeunload的执行机制上：浏览器会优先处理这个事件里的返回值，直接弹出系统确认框，而Bootstrap Toast的show()是依赖DOM异步渲染的操作，会被浏览器的渲染队列延迟，导致Toast在系统框之后才显示。

要解决这个问题，必须用同步方式强制提示框立即渲染，以下是两种可行方案：

方案一：使用原生自定义提示框（最可靠） #

直接在页面中嵌入一个固定定位的提示元素，默认隐藏，在onbeforeunload中同步显示并强制浏览器重绘：

第一步：添加HTML提示元素 #

<!-- 自定义右下角提示框 -->
<div id="custom-toast" style="
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #2d3748;
  color: white;
  padding: 14px 24px;
  border-radius: 6px;
  z-index: 9999;
  display: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
">
  继续操作会丢失所有工作内容
</div>

第二步：修改JavaScript代码 #

window.onbeforeunload = () => {
  console.log(window.in_progress);
  
  // 显示提示框
  const customToast = document.getElementById('custom-toast');
  customToast.style.display = 'block';
  
  // 强制浏览器立即重绘，避免渲染延迟
  void customToast.offsetWidth;

  if(window.in_progress > 0){
    console.log(window.in_progress);
    return true;
  }
};

方案二：适配Bootstrap Toast（需提前初始化） #

如果一定要用Bootstrap Toast，需要提前初始化实例，并在事件中强制重绘：

第一步：提前初始化Toast（不要在onbeforeunload内新建） #

// 页面加载完成后初始化Toast
const toastLiveExample = document.getElementById('liveToast');
const toast = new bootstrap.Toast(toastLiveExample);

第二步：修改onbeforeunload事件代码 #

window.onbeforeunload = () => {
  console.log(window.in_progress);
  
  toast.show();
  // 强制重绘Toast元素，确保立即显示
  void toastLiveExample.offsetWidth;

  if(window.in_progress > 0){
    console.log(window.in_progress);
    return true;
  }
};

关键说明 #

浏览器对onbeforeunload事件有严格限制：异步操作（如setTimeout）会被直接忽略，所以必须通过void element.offsetWidth这种方式强制触发同步重绘，让提示框在系统确认框弹出前显示。

内容的提问来源于stack exchange，提问作者Berik