Ошибка window.matchMedia('print') в Firefox и IE

Question

У меня есть кнопка печати, которая запускает функцию печати на любой веб-странице. Кнопка скрывается, как только пользователь нажимает на нее, и показывает, завершил ли пользователь печать или нажал кнопку закрытия в окне печати. Он отлично работает в Chrome, но не работает в Firefox и 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();
            }
        });
    }
}());

Любые предложения, что я могу пропустить?

Answer 1

К сожалению, у меня та же проблема, что и у вас, и я провел небольшое исследование. На данный момент кажется, что ошибка существует в последних версиях FF и IE до сих пор, и она не была исправлена.

Вы можете проверить эту ошибку для Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=774398

Я обнаружил, что у другого человека возникла та же проблема, что и у нас, и у него нет действительно удовлетворительного ответа: https://social.technet.microsoft.com/Forums/office/en-US/bc3ca05e-b4ef-425b-8bbd-d3f700a8c85e/windowmatchmedia-not-firing-for-print-in-ie?forum=ieitprocurrentver

Если я когда-нибудь найду решение, я отредактирую это.

В основном я использую тот же код, что и вы, в качестве примера для изменения размера старшей диаграммы перед печатью:

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;

Это прекрасно работает в Chrome. Но FF и IE11 не сработают.

Answer 2

Возможно, вы захотите посмотреть на событие onafterprint. По крайней мере, это запускается Firefox и IE, поэтому с потенциальной защитой (чтобы событие не срабатывало несколько раз) для вашего варианта использования вы можете прослушать оба matchMedia("print") и onafterprint событие.