通过JS调用window.print()时Window.onafterprint事件失效问题排查

开发者阿泽

2026-8-4

Chrome中onafterprint事件失效的替代方案

问题分析

Chrome近期版本更新后，在弹窗/lightbox场景下调用window.print()时，onafterprint事件的触发逻辑发生了变化，导致该事件不再可靠触发，但Edge（IE）仍保持原有逻辑。

可行替代方案

方案1：通过媒体查询监听打印状态（推荐）

利用matchMediaAPI监听打印媒体查询的状态变化，这是目前Chrome环境下最可靠的检测方式：

// 创建打印媒体查询监听实例
const printMediaQuery = window.matchMedia('print');

function handlePrintStatusChange(e) {
    // 当媒体查询从打印状态切换回屏幕状态时，判定为打印完成
    if (!e.matches) {
        // 替换为你的lightbox关闭逻辑，比如对应的close方法
        alert('打印完成');
        // 移除监听避免重复触发
        printMediaQuery.removeEventListener('change', handlePrintStatusChange);
    }
}

// 添加监听并触发打印
printMediaQuery.addEventListener('change', handlePrintStatusChange);
window.print();

方案2：焦点监听+定时器兜底

如果媒体查询方案存在兼容问题，可以结合页面焦点变化和定时器做兜底处理：

window.print();

let isPrinting = true;

// 打印对话框关闭后页面会恢复焦点，以此判断打印结束
window.addEventListener('focus', function printFinishHandler() {
    if (isPrinting) {
        alert('打印完成'); // 替换为lightbox关闭逻辑
        isPrinting = false;
        window.removeEventListener('focus', printFinishHandler);
    }
});

// 3秒兜底定时器，防止焦点监听失效
setTimeout(() => {
    if (isPrinting) {
        alert('打印完成');
        isPrinting = false;
    }
}, 3000);