Safari，javascript：等待打印确认窗口

Question

I have code like this:

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

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

这在 Safari 上第一次单击打印按钮时有效，但是如果我取消打印对话框，返回到页面并再次单击打印按钮，则 Safari 弹出消息，内容为“此网页正在尝试打印。您要打印此网页吗？”然后，如果我继续操作，生成的打印预览将包含页面上的所有元素，即使那些应该被隐藏的元素也会显示出来。

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

有什么方法可以在打开“确定”对话框时停止执行吗？

谢谢！

- crowhill

---

CSS打印媒体。为什么不使用它？设置一个打印样式表，隐藏您不想看到的内容。 - epascarello

我正在使用打印媒体查询。上面的内容被简化以说明问题。before和after函数存在的原因远远超出了这个问题的范围。 - crowhill

遇到完全相同的问题...只在Safari中发生。欢迎提供解决方案！ - Eyelash

可能是重复的问题：Safari不允许第二个window.print()。 - Laura

Answer 1

我遇到了同样的问题，我的调查显示每当用户按下取消(或键盘上的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();
}

- Fedor

---

似乎在 Monterey - Safari 16 上无法工作。 - coderfin