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