window.matchMedia('print') failing in Firefox and IE

Question

I have a print button that launches the print functionality on any webpage. The button hides as soon as the user clicks on it and shows if the user is done printing or presses close in the print window. It works fine in Chrome but is failing in firefox and IE.

<input type="button" onclick="launchPrint()" value= "Print me" />


function launchPrint(){
$(".print-box").hide();
window.print();
}

(function() {
    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (!mql.matches) {
                $(".print-box").show();
            }
        });
    }
}());

Any suggestions what I may be missing?

Answer 1

Unfortunately, I am on the same problem as you and I did some research. For now it seems that the bug exists on recents version of FF and IE still and it hasn't been fixed.

You can check out this bug for Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=774398

I found another person having the same issue as us and it hasn't a really satisfying answer: https://social.technet.microsoft.com/Forums/office/en-US/bc3ca05e-b4ef-425b-8bbd-d3f700a8c85e/windowmatchmedia-not-firing-for-print-in-ie?forum=ieitprocurrentver

If I ever come accross any solution, I will edit this.

I mostly use the same code as you as exemple for highchart to resize before printing:

function printUpdate() {
    jQuery.each(Highcharts.charts, function(index, value){
        value.reflow();
    });
};
var mediaQueryList = window.matchMedia('print');
if(navigator.appVersion.indexOf("MSIE 8.")!==-1)//For IE8
{
    document.attachEvent(function (mql){printUpdate();}, mediaQueryList);
}
else
{
    if (window.matchMedia) {
        mediaQueryList.addListener(function (mql) {
            if (mql.matches)
            {
                printUpdate();
            }
        });
    }
}

window.onbeforeprint = printUpdate;

This work fine in chrome. But FF and IE11 won't fire the event.

Answer 2

You might want to look at the onafterprint event. At least this is triggered by Firefox and IE, so with a potential guard (to make sure the event did not fire multiple times) for your use case you can listen to both the matchMedia("print") and the onafterprint event.