现代浏览器是否支持onbeforeprint / onafterprint HTML事件？

Question

我正在尝试更新页面内容以进行打印。我希望每个输入元素（文本框，列表等）都有标签（跨度），以防止打印时发生文本切断。我想在打印前确保所有这些标签都反映了用户输入的各个输入字段中最新的用户值。

我的第一个想法是在每个文本框之后放置一个标签，并在页面渲染时将其与相同的值绑定，然后根据CSS媒体属性隐藏/显示输入或标签。但是我还需要为每个输入元素设置onchange个处理程序，以便在每次更改其值时更新其相应的标签。

我的下一个想法是使用onbeforeprint和一些jQuery来动态更新标签，当前值全部在一个位置。更清晰，集中，更简洁的代码。

但据我所知，onbeforeprint和onafterprint仅在IE和Firefox中受支持。 ...但是......我发现的每篇文章或帖子都谈到了这两个功能的浏览器支持是4年或5年，甚至更久以前！

所以我想知道，Chrome和Safari在过去5年的任何时候都增加了对这两项功能的支持吗？

Answer 1

虽然上述答案非常适合回答直接问题，但省略了以下基本信息：

虽然特定的onbeforeprint和onafterprint事件不是普遍支持的，但是对概念事件有功能支持 - 在大多数现代浏览器中可以在打印之前和之后执行代码。

请参阅此处了解详情：http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

要点： 存在一个window.watchMedia API，它允许您挂钩CSS媒体查询的转换事件，包括'print'媒体查询。这使您可以挂钩在打印页面之前和之后立即发生的事件。

Chrome和Webkit很好地支持此API，IE和Firefox支持onbeforeprint和onafterprint事件，为您提供相当好的覆盖率。

Answer 2

2013年11月14日MDN page on onbeforeprint标记为已更新，Chrome，Opera和Safari为“否”，“IE为”（是），Firefox为“6.0”。这与使用当前Chrome（版本34）和Safari的最新Windows版本（5.1.7）进行检查的结果一致。不会触发任何事件，并且在开发人员工具中，当使用onbeforeprint属性时，开发人员工具中的“事件监听器”下不会显示onbeforeprint侦听器。

2008年有一个WebKit bug report关于beforeprint和afterprint事件缺乏支持，并且有一个建议的补丁但也有问题，而且似乎没有进展。

所以答案是“不。”

比照。 onbeforeprint and onafterprint is not working in Chrome and IE?

关于可能的后续问题“我应该使用什么呢？”，它应该作为一个新问题发布，有足够的细节（包括代码）来描述原始问题 - 特别是，会是什么使用打印样式表无法完成的部分。

Answer 3

From MDN onbeforeprint:

---

您总是可以添加一个事件处理程序来侦听更改并处理更新内容。这是基本的想法[不跨浏览器友好]

document.body.addEventListener("change", function(e){
    var elem = e.target || e.srcElement;
    elem.nextSibling.innerHTML = elem.value;
});

JSFiddle：http://jsfiddle.net/y4MGE/

您可以使用打印样式表在打印时隐藏文本框，并在其位置显示您想要的内容。