window.matchMedia('print'） 在 Firefox 和 IE 中失败

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

本文关键字：IE 失败 Firefox print matchMedia window      更新时间：2023-09-26

我有一个打印按钮，可以在任何网页上启动打印功能。该按钮在用户单击后立即隐藏，并显示用户是否已完成打印或在打印窗口中按关闭。它在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();
            }
        });
    }
}());

任何建议我可能缺少什么？

不幸的是，我和你一样有同样的问题，我做了一些研究。目前看来，该错误仍然存在于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;

这在铬中工作正常。但是FF和IE11不会触发该事件。

你可能想看看 onafterprint 事件。至少这是由 Firefox 和 IE 触发的，因此为您的用例使用潜在的防护装置（以确保事件不会多次触发），您可以同时收听matchMedia("print")和onafterprint事件。

相关文章：