javascript - window.matchMedia('print') failing in Firefox and IE - Stack Overflow

admin管理员组

文章数量:1410689

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?

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?

• javascript
• html
• printing
• matchmedia

Share Follow asked Jan 15, 2016 at 21:04 clever_bassiclever_bassi 2,49022 gold badges2626 silver badges4646 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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/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./Forums/office/en-US/bc3ca05e-b4ef-425b-8bbd-d3f700a8c85e/windowmatchmedia-not-firing-for-print-in-ie?forum=ieitprocurrentver

If I ever e 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.

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.

本文标签： javascriptwindowmatchMedia(39print39) failing in Firefox and IEStack Overflow