목차
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 이벤트 시 실행코드 많으면 인쇄 지연시키니 주의.
(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>
</head>
<body onafterprint="homzzang()">
<button onclick="window.print()">인쇄</button>
</body>
</html>
결과보기
