Firefox中打印成功后如何重定向至指定URL？

我太懂这种跨浏览器兼容的糟心感了——同样的代码在Chrome里顺顺当当，到Firefox就卡壳，明明console.log能正常输出，就是window.location.href死活不生效。这事儿其实是浏览器对window.print()的执行逻辑差异搞的鬼：

• Chrome里window.print()是异步非阻塞的，调用后会立刻继续执行后续代码，所以不管用户是完成打印还是取消，都会触发重定向；
• Firefox里window.print()是阻塞的，而且只有当用户取消打印对话框时，才会继续跑后续代码；如果用户选择完成打印，Firefox会等打印任务彻底结束后才释放上下文，但这时候原本的重定向代码已经错过了执行时机。

那该怎么搞定呢？我们可以用浏览器原生的afterprint事件，这个事件会在打印对话框关闭（不管是打印完成还是取消）后触发，刚好能保证在打印操作收尾后执行重定向逻辑。

优化后的代码示例： #

function print() {
  // 绑定打印完成后的事件处理函数
  window.addEventListener('afterprint', function redirectAfterPrint() {
    // 执行重定向
    window.location.href = "http://localhost:8000/admin/orders";
    // 解绑事件，避免重复触发
    window.removeEventListener('afterprint', redirectAfterPrint);
  });
  
  // 调用打印功能
  window.print();
  console.log('hi');
}

补充说明： #

• afterprint事件是所有现代浏览器都支持的标准API，能完美兼容Firefox、Chrome、Edge等环境；
• 为什么要解绑事件？如果用户多次触发打印操作，不解绑的话事件会重复绑定，导致一次打印触发多次重定向，解绑后能保证每次打印只执行一次重定向逻辑；
• 这里要提一句：浏览器没有办法直接区分“打印成功”和“取消打印”（毕竟没法判断打印机真的输出了纸张），所以统一在对话框关闭后执行后续逻辑是目前最通用的解决方案。

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