Safari、javascript：等待打印确认窗口答案

【问题标题】：Safari, javascript: wait for print confirmation windowSafari、javascript：等待打印确认窗口
【发布时间】：2023-03-29 10:07:02
【问题描述】：

我有这样的代码：

hideStuff();
window.print();
showStuff();

因此，hideStuff() 隐藏了页面上的某些元素以便它们不会打印，而showStuff() 在打印对话框关闭后恢复这些隐藏的元素。

当我点击打印按钮时第一次在 Safari 上工作，但如果我随后取消打印对话框，返回页面并再次点击打印按钮， Safari 会弹出一条消息，内容为“此网页正在尝试打印。您要打印此网页吗？”然后如果我继续，生成的打印预览会包含页面的所有元素，甚至是那些应该被隐藏的元素。

问题似乎是“你确定”对话框延迟打开 window.print()，但它确实允许 javascript 继续。也就是说，showStuff() 立即运行，而不是打印对话框关闭后。

当“你确定”框打开时，我能做些什么来停止执行？

谢谢！

【问题讨论】：

CSS 打印媒体。你为什么不使用它？设置一个打印样式表，隐藏您不想看到的内容。
我是使用印刷媒体查询。以上是为了说明问题而简化的。 before 和 after 函数存在的原因远远超出了这个特定问题的范围。
遇到完全相同的问题...仅在 safari 中发生。欢迎提出解决方案！
safari not allowing a second window.print()的可能重复

标签： javascript safari

【解决方案1】：

我遇到了同样的问题，我的调查表明，只要用户点击 Cancel（或键盘上的 Esc 按钮）关闭它，就会触发 onfocus 事件确认对话框。因此，基于onfocus 事件的解决方法可能如下所示：

function safariPrint() {
  // Safari 12, macOS
  if (!window.onafterprint) {
    const onAfterPrint = mql => {
      if (!mql.matches) {
        showStuff();

        // printing is finished => unsubscribe to avoid leaks
        if (mediaQueryList.removeEventListener) {
          mediaQueryList.removeEventListener('change', onAfterPrint);
        } else {
          mediaQueryList.removeListener(onAfterPrint);
        }
      }
      window.onfocus = null;
    };

    // a tiny polyfill for a plain onafterprint
    // to handle standard window.print() dialog events
    const mediaQueryList = window.matchMedia('print');
    if (mediaQueryList.addEventListener) {
      mediaQueryList.addEventListener('change', onAfterPrint);
    } else {
      mediaQueryList.addListener(onAfterPrint);
    }

    // if a user cancels printing in Safari's print confirmation dialog
    // then we will trigger a cleanup
    window.focus();
    window.onfocus = () => {
      onAfterPrint(mediaQueryList);
    };
  }

  hideStuff();    
  window.print();
}

【讨论】：