我的页面上有一些要打印的内容。在打印时，某些div必须被隐藏，而只有一个会出现。该代码可以在Chrome，Firefox和IE上正常运行，但不能在Safari上运行。
这是我的JS:
$(".printButton").on("click", function (event) {
event.preventDefault();
$("form").attr("style", "display: none !important");
$("body").append("<div class='divToBePrinted' style='display: block !important;'></div>");
$(".content").clone().appendTo('.divToBePrinted');
window.print();
$("form").removeAttr("style");
$(".divToBePrinted").remove();
});
这是我的简化HTML:
<html>
<body>
<form>
<!-- Other content -->
<div class="content">
Content to be printed.
</div>
<button class="printButton"></button>
<!-- Other content -->
</form>
</body>
</html>
在Safari上，window.print()似乎在event.preventDefault()之前执行，从而捕获了要打印的整个页面。
编辑:我试图像下面那样使用setTimeout，但是没有用。有特定于打印的CSS，但是文件很大。我试图将其删除，但是得到了相同的结果:在所有浏览器上都可以正常运行，但在Safari上却不能。
具有setTimeout的JS:
$(".printButton").on("click", function (event) {
event.preventDefault();
$("form").attr("style", "display: none !important");
$("body").append("<div class='divToBePrinted' style='display: block !important;'></div>");
$(".content").clone().appendTo('.divToBePrinted');
//setTimeout(window.print, 1000); -- I tried this way
// And this way
setTimeout(function () {
window.print();
$("form").removeAttr("style");
$(".divToBePrinted").remove();
}, 0);
});
编辑2:我试图将setTimeout设置为1000毫秒，并且它在大多数情况下都有效，但是它不是最终的解决方案，因此我将进行新的研究以找到更好的方法。
setTimeout(function () {
window.print();
$("form").removeAttr("style");
$(".divToBePrinted").remove();
}, 1000);
最佳答案
看来onafterprint事件几乎在window.print之后立即触发。
在大多数浏览器上，只有在用户单击“打印对话框”上的“打印”时才调用此事件，但是在Safari上，似乎会随着“打印对话框”的显示而触发。