打印iframe时，iframe中的onafterprint停止在chrome中触发？答案

【问题标题】：onafterprint in iframe stopped firing in chrome when printing iframe?打印iframe时，iframe中的onafterprint停止在chrome中触发？
【发布时间】：2021-06-10 13:40:40
【问题描述】：

有没有其他人经历过 onafterprint 事件在打印和 iframe（不是整个页面）时不会在 chrome 中触发？我们的客户报告说它在 1 月份仍然有效。 onafterprint 似乎不会针对主文档或 iframe 触发。我在页面上有<body onafterprint="some_function()">。

我尝试在 browserstack 上运行我的测试，但它似乎在 Chrome 88 中停止工作。

doc.html:

<html>
    <body style="background-color: #69D;" onafterprint="console.log('Main document onafterprint()');">
        <iframe src="oap.html" height="500" width="500"/>
    </body>
</html>

oap.html：

<!DOCTYPE html>
<html>
<body onafterprint="afterprint()">

<h1><a href="javascript:window.print();">Click to print iframe</a></h1>

<script>
function afterprint() {
  console.log("iframe printed");
}

/* This fires in chrome */
            if (window.matchMedia) {
              var mediaQueryList = window.matchMedia('print');
              mediaQueryList.addListener(function(mql) {
                  if (mql.matches) {
                      console.log('before print');
                  } else {
                      console.log('afterprint');
                  }
              });
            }

</script>

</body>
</html>

【问题讨论】：

标签： javascript google-chrome iframe

【解决方案1】：

我发现使用 matchMedia() 可以解决 Chrome 的问题。对我来说似乎足够好。

/* This fires in chrome */
            if (window.matchMedia) {
              var mediaQueryList = window.matchMedia('print');
              mediaQueryList.addListener(function(mql) {
                  if (mql.matches) {
                      console.log('before print');
                  } else {
                      console.log('afterprint');
                  }
              });
            }

【讨论】：