window.print()를 이용하여 웹사이트 프린트 할때, 프린트 이전과 이후 시점을 알아내야 할 경우가 있습니다.
브라우져 호환성을 고려해야겠지만 아래와 같은 방법으로 이벤트를 캐치 할 수 있습니다.
1. onbeforeprint 및 onafterprint 이벤트 핸들러
프린터가 요청될때, 그리고 끝날때 Internet Explore와 Firefox(Ver.6+)는 onbefreprint, onafterprint 이벤트를 발생합니다.
이 이벤트를 처리할 이벤트 핸들러를 구현하여 프린트 전/후에 대한 처리를 할 수 있습니다.
JavaScript
window.onbeforeprint = function() {
console.log('이 Function은 프린트 이전에 호출됩니다.');
};
window.onafterprint = function() {
console.log('이 Function은 프린트 이후에 호출됩니다.');
};
2. window.matchMedia
하지만 Chrome, Opera는 위와 같은 onbeforeprint 및 onafterprint를 이용한 처리가 불가능합니다.
하지만, window.matchMedia(‘print’)를 이용하여 이벤트 식별이 가능합니다.
JavaScript
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
console.log('이 Function은 프린트 이전에 호출됩니다.');
} else {
console.log('이 Function은 프린트 이후에 호출됩니다.');
}
});
}
matchMedia는 자바스크립트를 이용하여 CSS에 접근 하고, 미디어쿼리스트링의 일치 여부를 반환하는 기능을 제공하며,
자세한 설명은 MDN API 사이트를 참고 하시면 되시겠습니다.
'' 카테고리의 다른 글
| Frontend 개발을 이끄는 3대장 (0) | 2017.11.16 |
|---|---|
| [AXISJ분석] AXUtil.js 3편 (0) | 2015.11.17 |
| 배열안에 Object데이터에 특정 key의 value값만 ,로 구분해서 합치고 싶을 경우 (0) | 2015.10.22 |
| [AXISJ분석] AXUtil.js 2편 (0) | 2015.03.27 |
| [AXISJ분석] AXUtil.js 1편 (0) | 2015.03.27 |
