javascript - 为什么在主窗口中打印后会触发 iframe after print 事件监听器？

Question

export const printPdf = (data: any) => {
  const newBlob = new Blob([data], { type: 'application/pdf' })
  const fileLink = window.URL.createObjectURL(newBlob)
  const iframe = document.createElement('iframe')
  iframe.src = fileLink
  iframe.id = 'print_pdf'
  iframe.name = 'print_pdf'
  // iframe.style.display = 'none'
  iframe.onload = () => {
    iframe.contentWindow!.addEventListener('afterprint', () => {
      document.body.removeChild(iframe)
    })
  }
  document.body.appendChild(iframe)
  window.frames['print_pdf'].focus()
  window.frames['print_pdf'].print()
}

因此，在 iframe 之后，打印什么也没有发生。但是当您在对话框关闭后打印主页时。监听器 iframe.contentWindow!.addEventListener('afterprint', () 开始执行。为什么 iframe 不监听自身打印事件？

Answer 1

这是因为在调用 print() 方法之前您不会等待框架内容加载，而是在附加事件监听器之前等待。
因此，在附加事件监听器之前会出现打印对话框，这会阻止 js，然后触发打印事件，然后附加该事件。

如果您在页面加载后调用 print()，您将获得正常行为，并且监听器将触发: https://jsfiddle.net/5qbc1pzj/

iframe.onload = () => {
  iframe.contentWindow!.addEventListener('afterprint', (evt) => {
    document.body.removeChild(iframe)
  });
  window.frames['print_pdf'].focus()
  window.frames['print_pdf'].print()
};

<小时/>

至于为什么当您在主窗口上调用 print() 时会在框架窗口上触发事件，这是正常的，因为 iframe 是打印文档的一部分，它也会接收此事件。

来自the specs :

The user agent must fire an event named afterprint at the relevant global object of the Document that is being printed, as well as any nested browsing contexts in it.