切换页面前置打印异常求助：HTML5表单打印与跳转冲突问题

你遇到的核心问题是window.print()的异步特性导致的——浏览器触发打印对话框后，不会等待用户完成操作就直接执行后续的window.location跳转，所以打印还没触发就跳走了；但去掉跳转的话，用户操作完打印后又停留在打印页面，体验不佳。

针对Chrome 65.0.3325.181，我们可以利用浏览器的onafterprint事件来解决这个问题，这个事件会在用户处理完打印对话框（无论是点击打印还是取消）之后触发，刚好能满足“先处理打印，再跳转”的需求。

替换你原来的脚本为下面这段代码：

<script type="text/javascript">
  // 先触发打印对话框
  window.print();
  
  // 监听打印完成后的事件
  window.onafterprint = function() {
    // 执行页面跳转
    window.location.href = "aktien.php";
    // 移除事件监听，避免后续重复触发
    window.onafterprint = null;
  };
</script>
</body>

为什么这样能解决问题？ #

• window.print()是异步执行的，调用后浏览器会立即弹出打印对话框，但代码不会阻塞等待用户操作。
• onafterprint事件会在用户关闭打印对话框（无论是否完成打印）后触发，此时再执行跳转就不会打断打印流程了。
• 最后移除事件监听是为了防止页面如果有其他操作意外触发这个事件，避免不必要的跳转。

这样修改后，用户就能正常触发打印（或取消），之后自动跳转到aktien.php页面，完美解决你遇到的两个问题。

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