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

所以在iframe完成打印后，什么都没有发生。但当对话框关闭后打印主页面时。侦听器iframe.contentWindow！。addEventListener“afterprint”已开始执行。为什么iframe没有侦听自身的打印事件？

这是因为您没有等待调用打印方法之前加载了框架内容，而是在附加事件侦听器之前等待。 因此，在附加事件侦听器之前会出现打印对话框，这会阻止js，然后会触发打印事件，然后再附加事件

如果在页面加载后调用print，您将获得正常行为，您的侦听器将触发：

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

发件人：

用户代理必须在正在打印的文档以及其中的任何文档的末尾触发名为afterprint的事件

---

谢谢。但我还是不知道为什么它不起作用你什么意思？它不起作用，因为你太早打电话给print。是的。所以我认为我这边的问题再次感谢你

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.onload = () => {
  iframe.contentWindow!.addEventListener('afterprint', (evt) => {
    document.body.removeChild(iframe)
  });
  window.frames['print_pdf'].focus()
  window.frames['print_pdf'].print()
};