window.print()回调函数

最新推荐文章于 2022-12-03 22:14:25 发布

代码玩家

最新推荐文章于 2022-12-03 22:14:25 发布

阅读量8.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_33172029/article/details/88848922

前端专栏收录该内容

53 篇文章

订阅专栏

本文探讨了在不同浏览器中`window.print()`回调函数的行为差异，例如在IE8上，回调函数在弹出打印界面前后各执行一次；而在谷歌浏览器中，回调函数会被调用多次。通过alert和console.log测试，展示了具体的执行顺序和次数。对于如何获取打印或取消状态的问题，文章引用了SegmentFault的相关讨论作为参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情况1）在IE8上，回调前函数可以，回调后函数

alert方式测试：

测试结果：

顺序1：alert(1)

顺序2：alert(2)

顺序3：弹出打印界面

情况2）谷歌上调用，回调前，回调后，两个函数，会各自调用两次

alert方式测试：

测试结果：

顺序1：alert(1)

顺序2：弹出打印界面

顺序3：alert(1)

顺序4：alert(2)

顺序5：alert(2)

console.log方式测试：

测试结果：beforePrint，beforePrint，afterPrint，afterPrint

函数：

$(function(){
	var beforePrint = function() {
        console.log("beforePrint");
        alert(1);
    };

	var afterPrint = function() {
	console.log("afterPrint");
        alert(2);
	};

	if (window.matchMedia) {
	   var mediaQueryList = window.matchMedia('print');
	   mediaQueryList.addListener(function(mql) {
	       if (mql.matches) {
	            beforePrint();
	       } else {
	            afterPrint();
	       }
	   });
	 }

	window.onbeforeprint = beforePrint;
	window.onafterprint = afterPrint;
});

function applyPrint(){
	window.print();
}

参考：

segmentfault：调用window.print()方法，如何获取打印或者取消的状态？