목차
- onafterprint 예제 - 인쇄 버튼 존재 X 경우
- onafterprint 정의
- onafterprint 구문
- onafterprint 예제 - 인쇄 버튼 존재 O 경우
onafterprint 예제 - 인쇄 버튼 존재 X 경우
※ 키보드로 「Ctrl + P」 단축키 누르거나, 마우스 오른쪽 눌러 「인쇄」 클릭해서 인쇄창 띄워야 함.
<!DOCTYPE html>
<html>
<body onafterprint="homzzang()">
<h1>홈짱닷컴 (Homzzang.com)</h1>
<p> 홈페이지 제작관리 강의/대행</p>
<script>
function homzzang() {
alert("이 문서 인쇄 중.");
}
</script>
</body>
</html>
결과보기
onafterprint 정의
페이지 인쇄 시 「인쇄 대화상자 닫히면」 실행할 코드 지정.
1. onafterprint 속성 사용 가능 태그 종류
<body>
2.
- onafterprint 속성은 종종 onbeforeprint 속성과 함께 사용됨.
- onafterprint 이벤트는 인쇄 작업 완료 후에만 실행됨. 따라서 키보드로 (인쇄창 띄우기 단축키: Ctrl + P 키) 누르거나, 이벤트 핸들러에서 window.print() 호출하는 경우에만 사용 가능.
- onafterprint 이벤트 시 실행코드 많으면 인쇄 지연시키니 주의.
3.
- (Chrome / Edge / Firefox)에서 사용 가능.
- (Safari / Opera) 경우 지원 X
- IE 경우, 인쇄 대화상자 이후가 아니라 이전에 발생.
onafterprint 구문
HTML 방식
- <element onafterprint="myScript">
JS 방식 (3가지)
- object.onafterprint = ()=>{myScript};
- object.onafterprint= function(){myScript};
- object.addEventListener("afterprint", myScript);
[속성값]
myScript
인쇄 대화상자 이후에 실행할 JS 코드
- 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
- 사용 방식 통일 권장.
onafterprint 예제 - 인쇄 버튼 존재 O 경우
<!DOCTYPE html>
<html>
<head>
<title>홈짱닷컴 (Homzzang.com)</title>
<script>
function homzzang() {
alert("인쇄 작업 완료.");
}
</script>
</head>
<body onafterprint="homzzang()">
<h1>홈짱닷컴 (Homzzang.com)</h1>
<p>그누보드5/영카트5 제작관리 강의/대행</p>
<button onclick="window.print()">인쇄</button>
</body>
</html>
결과보기
