如何区分window.print()的打印与取消操作及检测iframe工具栏打印点击

1. 区分window.print()的打印/取消操作 #

浏览器没有直接提供区分打印和取消的原生API，但可以通过beforeprint和afterprint事件结合时间差判断来实现。核心逻辑是：用户触发打印后beforeprint先触发，若选择打印，afterprint会在打印任务完成后触发（存在明显延迟）；若选择取消，afterprint会立即触发。

Angular组件示例代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private printStartTime: number | null = null;
  // 可根据实际场景调整打印操作的最小耗时阈值
  private printThreshold = 500;

  ngOnInit() {
    window.addEventListener('beforeprint', () => {
      this.printStartTime = Date.now();
    });

    window.addEventListener('afterprint', () => {
      if (!this.printStartTime) return;
      
      const elapsedTime = Date.now() - this.printStartTime;
      if (elapsedTime > this.printThreshold) {
        console.log('用户点击了打印按钮');
        // 执行打印完成后的业务逻辑
      } else {
        console.log('用户点击了取消按钮');
        // 执行取消打印后的业务逻辑
      }
      this.printStartTime = null;
    });
  }

  triggerPrint() {
    window.print();
  }
}

注意：该方法依赖时间差判断，部分浏览器或极端场景可能存在误差，可根据实际测试调整printThreshold的数值。

2. 检测toolbar=1的iframe打印点击 #

同源场景 #

如果iframe与主页面同源，可直接监听iframe内部window的beforeprint事件：

Angular组件示例代码：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<iframe #printIframe src="你的iframe地址" toolbar="1"></iframe>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('printIframe') printIframe!: ElementRef<HTMLIFrameElement>;

  ngOnInit() {
    this.printIframe.nativeElement.onload = () => {
      const iframeWindow = this.printIframe.nativeElement.contentWindow;
      if (iframeWindow) {
        iframeWindow.addEventListener('beforeprint', () => {
          console.log('iframe内的打印按钮被点击');
          // 执行对应的监听逻辑
        });
      }
    };
  }
}

跨域场景 #

若iframe与主页面跨域，受浏览器同源策略限制，无法直接监听内部事件，需iframe端配合通过postMessage主动向主页面发送通知：

iframe端代码示例：

window.addEventListener('beforeprint', () => {
  // 建议替换为具体的主页面origin，不要使用*以避免安全风险
  window.parent.postMessage('iframe-print-triggered', '*');
});

主页面监听代码示例：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit() {
    window.addEventListener('message', (event) => {
      // 验证消息来源origin，防止恶意消息
      if (event.origin === '你的iframe域名' && event.data === 'iframe-print-triggered') {
        console.log('iframe内的打印按钮被点击');
      }
    });
  }
}

内容的提问来源于stack exchange，提问作者yaocihuatl