How to Detect Print Events in Cross-Browser Applications?

Detecting Print Events in Cross-Browser Applications

Despite the deprecation of onbeforeprint() and onafterprint() in non-IE browsers, there is a way to achieve similar functionality using window.matchMedia and window.onbeforeprint/window.onafterprint.

Using window.matchMedia

Many modern browsers now support window.matchMedia, which allows for the detection of changes in CSS media queries. By combining window.matchMedia with window.onbeforeprint/window.onafterprint, it is possible to create a cross-browser approach to detecting print events.

Event Callback

The following function can be used as the event callback for window.matchMedia:

<code class="javascript">window.matchMedia('print').addListener(function(media) {
    if (media.matches) {
        // Print is starting
    } else {
        // Print has ended
    }
});</code>

Legacy IE and Firefox Support

For browsers that do not support window.matchMedia, it is still possible to listen for the onbeforeprint and onafterprint events directly:

<code class="javascript">$(window).on('beforeprint', beforePrint);
$(window).on('afterprint', afterPrint);</code>

Note: As mentioned in the provided response, it is important to be aware that the window.matchMedia listener may fire multiple times during a single print job in some browsers. This may affect the execution of your event handlers, so consider this behavior when designing your logic.

The above is the detailed content of How to Detect Print Events in Cross-Browser Applications?. For more information, please follow other related articles on the PHP Chinese website!