检查用户何时选择使用javascript进行打印

Question

当用户在Firefox或Internet Explorer等浏览器上选择"文件>打印",或点击运行以下javascript的链接时

window.print();

有没有办法有条件地检查这种模式并禁用一些JavaScript.

我试图这样做是因为我有一个插件,它添加了自己的圆角边框自定义标记,甚至在打印特定的样式表我不能覆盖这些样式,我不希望打印出页面时出现边框.

编辑:与插件无关,通过javascript完成样式更改,用于创建选项卡式用户界面,我已经完成打印特定的CSS来覆盖样式,当我使用Firefox Web开发人员工具栏> CSS>显示CSS时,它工作正常通过媒体类型>打印..但当我打印它不起作用时,javascript接管并更改样式..如果我完全禁用javascript然后打印显然再次正常工作.

谢谢

Answer 1

有一个通用的解决方案,以及旧浏览器的一些hackery.您可以print()在所有浏览器中覆盖该方法:

(function (oldPrint) { 
    window.print = function () {
        document.getElementById("hideThis").style.display = 'none';
        oldPrint();
    }
})(window.print);

这里的问题是,用户按Ctrl + P或访问文件菜单进行打印时不会触发.Internet Explorer通过以下方式提供解决方案onbeforeprint:

if ("onbeforeprint" in window) {
    var hideEl = document.getElementById("hideThis");
    window.onbeforeprint = function () { 
        hideEl.style.display = 'none';
    }
    window.onafterprint = function () {
        hideEl.style.display = '';
    }
}

对于其他浏览器,您可以在TJ VanToll的另一个答案中详细说明,将事件监听器添加到打印MediaQueryList :

if (window.matchMedia) {
    var mqList = window.matchMedia("print"),
        hideEl = document.getElementById("hideThis");

    mqList.addListener(function (mql) {
        hideEl.style.display = mql.matches ? 'none' : '';
    }); 
}

把它们放在一起:

(function () {
    var hideEl = document.getElementById("hideThis");

    // HTML5 spec, IE 5.5+, Firefox 6.0+
    if ("onbeforeprint" in window) {
        window.onbeforeprint = function () { 
            hideEl.style.display = 'none';
        }
        window.onafterprint = function () {
            hideEl.style.display = '';
        }
    }

    // Chrome 9+, Opera 12.1+, Safari 5.1+
    else if (window.matchMedia) {
        var mqList = window.matchMedia("print");

        mqList.addListener(function (mql) {
            hideEl.style.display = mql.matches ? 'none' : '';
        }); 
    }

    // Your fallback method, only working for JS initiated printing
    else {    
        (function (oldPrint) { 
            window.print = function () {
                hideEl.style.display = 'none';
                oldPrint();
            }
        })(window.print);
    }
})();