javascript onbeforeprint 和 onafterprint 在 Chrome 和 IE 中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13598790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onbeforeprint and onafterprint is not working in Chrome and IE?
提问by Shanky_Richer
I am using printing in my project (Using HTML and javascript). In mozilla onbeforeprint and onafterprint is working properly but not working in chrome.
我在我的项目中使用打印（使用 HTML 和 javascript）。在 mozilla 中，onbeforeprint 和 onafterprint 工作正常，但在 chrome 中无法正常工作。
回答by samiup
What works for Chrome is to check for 'matchmedia' in 'window' as in:
对 Chrome 有用的是在“窗口”中检查“匹配媒体”，如下所示：
if ('matchMedia' in window) {
window.matchMedia('print').addListener(function (media) {
//do before-printing stuff
});
} else {
window.onbeforeprint = function () {
//do before-printing stuff
}
}
回答by Ryan
Chrome doesn't have onbeforeprint.
The preferred method for doing this is to use print media specific stylesheets.
If you absolutely have to detect Print operations with javascript cross browserthis looks promising, but I haven't tried it myself.
如果您绝对必须使用 javascript 跨浏览器检测打印操作，这看起来很有希望，但我自己还没有尝试过。
回答by Caner
Chrome doesn't support those events. Instead it supports 'window.matchMedia'. Also there is a bug in Chromethat prevents it to print all the pages. For this reason, I suggest you add a print button to your web page and ask users to use the button instead of printing via the Chrome menu.
Chrome 不支持这些事件。相反，它支持“ window.matchMedia”。Chrome中还有一个错误，阻止它打印所有页面。出于这个原因，我建议您在网页上添加一个打印按钮，并要求用户使用该按钮而不是通过 Chrome 菜单进行打印。
var beforePrint = function() {
console.log("before");
};
var afterPrint = function() {
console.log("after");
};
var launchedFromMenu = true;
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
if(launchedFromMenu) {
// https://bugs.chromium.org/p/chromium/issues/detail?id=571070
alert("There is a bug in Chrome/Opera and printing via the main menu does not work properly. Please use the 'print' icon on the page.");
}
beforePrint();
} else {
afterPrint();
}
});
}
// These are for Firefox
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
function printPage() {
window["beforePrint"]();
launchedFromMenu = false;
window.print();
}
回答by Feugy
Quick update, because support of printing events has improved a lot
快速更新，因为对打印事件的支持提高了很多
- Chrome 63, releases in December 2017, supports it source
- Opera 50 as well
- Edge supports it since the beginning
- even old version 6 of IE (6!!) supports it
- Chrome 63，2017 年 12 月发布，支持源代码
- 歌剧 50 也是如此
- Edge从一开始就支持它
- 甚至旧版本 6 的 IE (6!!) 也支持它
回答by Charley B.
This works as of Chrome 63, according to their changelog.
根据他们的更新日志，这适用于 Chrome 63。
回答by Nitin Karale
In Chrome doesn't work onbeforeprint & onAfterPrint.
在 Chrome 中，onbeforeprint 和 onAfterPrint 不起作用。
But you can restrict print page by using css print media
但是您可以通过使用 css 打印媒体来限制打印页面
Example
例子
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
This css is include in header of the page.
此 css 包含在页面的标题中。
The css having following styles
具有以下样式的 css
#header, #menu, #entry-content, .noprint {display: none;}
