가끔 홈페이지를 보면 일정 시간마다 새로고침을 하거나, 일정 시간 후 다른 페이지로 보내는 기능을 볼 수 있습니다. HTML의 메타태그에서 제공하고 있는 기능입니다. 이를 기본으로 해서 JSP, Javascript에서 모두 동일한 기능을 하는 코드를 작성할 수 있습니다.
1. 일정 시간 후 페이지 새로고침
1.1 HTML의 메타 <meta> 태그 사용
<meta http-equiv="Refresh" content="3">
HTML의 <head> 영역에 사용하는 메타태그에서 지원합니다.
<meta> 태그에 http-equiv를 "Refresh"로 설정하고 시간을 content에서 설정합니다. content는 단일 파라미터로 숫자를 설정하면 초 단위로 일정 시간 후 페이지를 새로고침 합니다.
테스트용 코드는 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Refresh" content="3">
<title>Meta Tag Reload</title>
</head>
<body>
<h1>META Tag를 이용한 Reload</h1>
</body>
</html>
1.2 JSP에서 response.setHeader를 사용
<%
response.setHeader("Refresh", "3");
%>
JSP에서는 setHeader 함수를 사용해서 설정할 수 있습니다.
HTML의 메타태그에서 보던것과 같은 파라미터로 "Refresh"를 설정하고 그 다음 초를 설정하면 됩니다.
테스트용 코드는 아래와 같습니다.
<%@ page language="java"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setHeader Reload</title>
</head>
<body>
<h1>response.setHeader를 이용한 Reload</h1>
<%
response.setHeader("Refresh", "3");
%>
</body>
</html>
1.3 Javascript에서 setTimeout함수 사용
<script>
setTimeout('location.reload()', 3000);
</script>
Javascript에서는 setTimeout 함수를 사용해서 동일한 기능을 구현할 수 있습니다. setTimeout 함수는 일정 시간 후 특정 기능을 수행하도록 설정할 수 있으며 시간은 밀리세컨드를 사용하고 있습니다. 위와 동일한 시간을 설정하려면 1000을 곱한 숫자로 설정해야 합니다. location.reload()는 페이지를 새로 갱신합니다.
테스트용 코드는 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript Reload</title>
</head>
<body>
<h1>Javascript를 이용한 Reload</h1>
</body>
<script>
setTimeout('location.reload()', 3000);
</script>
</html>
2. 일정 시간 후 다른 페이지로 보내기
기본 방법은 위와 동일합니다만 파라미터가 조금씩 다릅니다.
2.1 HTML의 메타 <meta> 태그 사용
<meta http-equiv="Refresh" content="3; page2.jsp">
<meta http-equiv="Refresh" content="3; url=http://www.daum.net">
동일한 페이지에는 시간만 명시했지만, 다른 페이지로 보내는 경우 url을 추가합니다. content 항목에서 숫자 뒤에 세미콜론(;)으로 구분한 다음 url에 보내고자 하는 페이지의 주소를 적어주면 됩니다. url은 생략할 수 있습니다.
2.2 JSP에서 response.setHeader를 사용
response.setHeader("Refresh", "3; url=page3.jsp");
response.setHeader("Refresh", "3; http://www.daum.net");
HTML과 동일하게 설정합니다.
두 번째 파라미터에 시간 다음 세미콜론으로 구분하고 이동하려는 페이지의 주소를 적어주면 됩니다.
2.3 Javascript에서 setTimeout함수 사용
<script>
setTimeout("location.href='page1.jsp'", 3000);
</script>
<script>
setTimeout("location.href='http://www.daum.net'", 3000);
</script>
Javascript에서는 페이지 갱신할 때와는 조금 다르게 사용합니다. location.reload() 함수 대신 location.href 속성에 값을 대입합니다. 나머지 부분은 동일합니다. 주의할 점은 주소 부분을 작은따옴표(')로 묶어주어야 합니다.
2.4 심플 테스트 코드
아래는 간단한 페이지 이동 관련 코드를 3가지 방법으로 구현한 페이지들입니다.
각각을 명시해놓은 명칭인 page1.html, page2.jsp, page3.html로 만들어 실행해보면 3개의 페이지로 차례로 이동합니다.
page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Refresh" content="3; page2.jsp">
<title>Page1</title>
</head>
<body>
<h1>Page 1</h1>
<p>첫번째 페이지</p>
</body>
</html>page2.jsp
<%@ page language="java"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page2</title>
</head>
<body>
<h1>Page 2</h1>
<p>두번째 페이지</p>
<%
response.setHeader("Refresh", "3; page3.html");
%>
</body>
</html>page3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page 3</title>
</head>
<body>
<h1>Page 3</h1>
<p>세번째 페이지</p>
<script>
setTimeout("location.href='page1.html'", 3000);
</script>
</body>
</html>
'Dev. Cookbook > HTML, CSS' 카테고리의 다른 글
| [CSS] CSS만으로 버튼 만들기 (0) | 2022.05.22 |
|---|
댓글