Chrome中执行window.print后Bootstrap模态框无法正常弹出的问题

嘿，这个问题我在Chrome里碰到过好几次！本质原因是Chrome的打印对话框是系统级模态框，它会完全阻塞浏览器的主线程——这就导致在打印对话框打开期间，任何页面UI操作（包括Bootstrap模态框的渲染）都会被挂起，直到你关闭打印对话框才会执行。

下面给你几个可行的解决方案，适配你的场景：

方案1：调整执行顺序，先显示模态框再触发打印 #

如果业务逻辑允许，把模态框的显示放在打印操作之前，再用setTimeout延迟打印，确保模态框先完成渲染：

// 先打开Bootstrap模态框
$('#yourModal').modal('show');

// 延迟100ms触发打印，给模态框足够的渲染时间
setTimeout(() => {
  window.print();
}, 100);

这样模态框会先显示出来，然后打印对话框弹出，关闭打印后模态框依然会保留在页面上。

方案2：利用postMessage+异步回调，在打印完成后触发模态框 #

如果必须先执行打印再打开模态框，可以通过弹出窗口和父窗口的消息通信，确保打印对话框关闭后再触发模态框：

弹出窗口代码 #

// 执行打印
window.print();

// 打印对话框关闭后，向父窗口发送消息
window.opener.postMessage('triggerModal', '*');

父窗口代码 #

// 监听弹出窗口的消息
window.addEventListener('message', (event) => {
  if (event.data === 'triggerModal') {
    // 用setTimeout把模态框显示放到下一个事件循环，确保主线程已释放
    setTimeout(() => {
      $('#yourModal').modal('show');
    }, 0);
  }
});

方案3：关闭Bootstrap模态框的动画（可选优化） #

有时候模态框的动画会加重主线程负担，和打印操作的阻塞叠加导致问题更明显。可以关闭模态框的动画来尝试优化：

• Bootstrap 3：给模态框添加data-animation="false"属性
• Bootstrap 5：添加data-bs-animation="false"属性

比如：

<div class="modal fade" id="yourModal" data-animation="false">
  <!-- 模态框内容 -->
</div>

这些方案应该能解决你在Chrome里遇到的问题，你可以根据自己的业务场景选择最合适的一种~

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