检测来自iFrame的打印事件

Question

我正在尝试构建打印解决方案，该解决方案以编程方式使用URL打印PDF文档并在打印后激发事件。

我正在使用下面的“matchMedia”事件侦听器来使用Chrome（v54）进行测试。对于IE和Firefox，我打算收听同一个iframe contentWindow对象的“onbeforeprint”和“onafterprint”。

下面是我如何调用打印。 dojo函数只是一个xhr包装器。

   dojoRequest(url, { 
        handleAs: 'blob' 
       }).then(function (blob) { 
        var src = URL.createObjectURL(blob); 

        printFrame = document.createElement('iframe'); 
        printFrame.id = 'print-frame'; 
        // printFrame.style.display = 'none'; 
        printFrame.src = src; 
        document.body.appendChild(printFrame); 

        var mediaQueryList = printFrame.contentWindow.matchMedia('print'); 
        mediaQueryList.addListener(function (mql) { 
         console.log('print event', mql); 
         debugger; 
        }); 

        setTimeout(function() { 
         printFrame.contentWindow.print(); 
        }, 0); 
       }); 

除了“打印事件”事件从不触发，这很适用。我希望它在显示“打印预览”窗口时触发一次，并在点击“打印”按钮后再次触发。

我试着注册主“窗口”对象相同的事件侦听器。它在手动启动打印时（从“文件”菜单中）触发，但不是在使用上述方法以编程方式启动打印时触发。

Answer 1

要获得事件，必须包装你的代码的iframe的onload里面，像这样：

printFrame.onload = function() { 
    var mediaQueryList = printFrame.contentWindow.matchMedia('print'); 
    mediaQueryList.addListener(function (mql) { 
    console.log('print event', mql); 
    }); 

    setTimeout(function() { 
    printFrame.contentWindow.print(); 
    }, 0); 
}; 

不过，我仍然认为，这种做法是非常复杂的，而不是为企业应用程序不够稳定。

UPDATE：

的jsfiddle链接显示它适用于Chrome 54：https://jsfiddle.net/anhhnt/nj851e52/