예제 10-6. 1초마다 10픽셀씩 자동 스크롤. 예제 10-7. 웹 페이지 프린트. 예제 10-8. onbeforeprint와 onafterprint 이벤트 활용

WEB/JAVASCRIPT-CONCEPT 2017. 11. 2. 20:50 |

* 웹 페이지 스크롤

window 객체를 이용하면 웹 페이지를 상하좌우 스크롤 할 수 있다.

scrollBy()는 웹 페이지를 현재 위치에서 픽셀크기 만큼 스크롤하며

scrollTo()는 정해진 위치로 스크롤한다.


- 웹 페이지를 위로 10픽셀 스크롤(스크롤 다운) (스크롤 바를 내리는 동작)

window.scrollBy(0,10);


- 웹 페이지를 왼쪽으로 10픽셀, 아래로 15픽셀 스크롤(스크롤 업)

window.scrollBy(10,-15);


- 웹 페이지의 (0,200) 부분이 현재 윈도우의 왼쪽 상단 모서리에 출력되도록 스크롤

window.scrollTo(0,200);


* 웹 페이지 프린트

window.print(); 또는 print();


예제 10-6. 1초마다 10픽셀씩 자동 스크롤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 페이지의 자동 스크롤</title>
<script>
function startScroll(interval) {
    setInterval("autoScroll()", interval);
}
 
function autoScroll() {
    window.scrollBy(0,10); // 10픽셀 위로 스크롤
}
</script>
</head>
<body onload="startScroll(1000)">
<h3>자동 스크롤 페이지</h3>
<hr>
<h3>꿈길(이동순)</h3>
꿈길에<br>
발자취가 있다면<br>
님의 집 창밖<br>
그 돌계단 길이 이미 오래 전에<br>
모래가 되고 말았을 거예요<br><br>
하지만<br>
그 꿈길에서 자취 없다 하니<br>
나는 그것이 정말 서러워요<br><br>
이 밤도<br>
나는 님의 집 창밖<br>
그 돌계단 위에 홀로 서서<br>
혹시라도 님의 목소리가 들려올까<br>
고개 숙이고 엿들어요<br>
</body>
</html>
 
cs



예제 10-7. 웹 페이지 프린트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 페이지 프린트</title></head>
<body>
<h3>웹 페이지 프린트</h3>
<hr>
<p>window 객체의 print() 메소드를 호출하면
window 객체에 담겨 있는 웹 페이지가 프린트 됩니다.
<p>
<a href="javascript:window.print()">이곳을 누르면 프린트 됩니다.</a><p>
<input type="button" value="프린트" onclick="window.print()">
</body>
</html>
 
cs


* onbeforeprint와 onafterprint 리스너


어떻게 프린트를 하든 웹 페이지의 프린트는 다음 과정으로 진행된다.

1. window 객체에 onbeforeprint 리스너 호출

2. 웹 페이지 프린트(브라우저 웹 페이지를 프린터로 전송)

3. window 객체에 onafterprint 리스너 호출


* onbeforeprint와 onafterprint 활용

onbeforeprint 리스너에서 웹 페이지에 회사 로고를 삽입하고, 

onafterprint 리스너에서는 로고 이미지가 보이지 않게 원래 웹 페이지로 되돌린다.


미리 <img> 태그에 회사 로고 이미지를 삽입해두고

<div id="logoDiv"><img src="media/logo.png"></div>


CSS 스타일 시트를 다음과 같이 작성하여 이미지가 보이지 않도록 하였다

#logoDiv { display : none; }


onbeforeprint 리스너에서는 다음 코드를 실행하여 웹 페이지에 이미지가 나타나도록 한다.

logoDiv.style.display = "block"; // <div> 영역이 웹 페이지에 나타나게 함


onafterprint 리스너에서는 hideLogo()를 호출하여 이미지가 보이지 않게한다.

1
2
3
4
5
6
function hideLogo()
{
    logoDiv = document.getElementById("logoDiv");
    logoDiv.style.display = "none"; // 이미지를 포함하는 <div> 영역이 보이지 않게 함
    logoDiv.style.zIndex = -1; // <div> 영역을 문서의 맨 바닥에 배치
}
cs



예제 10-8. onbeforeprint와 onafterprint 이벤트 활용 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onbeforeprint와 onafterprint</title>
<style>
#logoDiv {
     display : none;
    position : absolute; left : 0; top : 0;
    width : 100%; height : 100%;
}
</style>
<script>
window.onbeforeprint=function (e) {
    logoDiv = document.getElementById("logoDiv");
    logoDiv.style.display = "block"; // block으로 변경. 로고가 화면에 나타나게 함
}
window.onafterprint=hideLogo;
function hideLogo() {
    logoDiv = document.getElementById("logoDiv");
    logoDiv.style.display = "none"; // <div> 영역이 보이지 않게 함
    logoDiv.style.zIndex = -1; // 이미지를 문서의 맨 바닥으로 배치
}
</script></head>
<body>
<h3>onbeforeprint, onafterprint 이벤트 예</h3>
<hr>
<div id="logoDiv">
    <img src="media/logo.png" alt="이미지 없습니다.">
</div>
<p>안녕하세요. 브라우저 윈도우에서는 보이지 않지만, 프린트시에는 회사 로고가 출력되는 예제를
보입니다. 마우스 오른쪽 버튼을 눌러 인쇄 미리보기 메뉴를 선택해 보세요.</p>
</body>
</html>
 
cs







저작자표시 비영리 동일조건

'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글

예제 10-10. navigator 객체로 브라우저의 정보 출력  (0) 2017.11.03
예제 10-9. location 객체로 웹 사이트 접속  (0) 2017.11.02
예제 10-5. 윈도우의 위치와 크기 조절  (0) 2017.11.02
예제 10-3. setTimeout()으로 웹 페이지 자동 연결. 예제 10-4. setInterval()로 텍스트 회전  (0) 2017.11.02
예제 10-1. window.open()으로 윈도우 열기. 예제 10-2. 윈도우 닫기 // 수정해야딤  (0) 2017.11.02
Posted by 너래쟁이
:

티스토리툴바