반응형
일정 시간이 지났을 때 웹 페이지를 자동으로 새로 고침 해주는 소스입니다. setTimeout()함수를 이용해서 정 해진 시간 간격마다 페이지 로딩 함수를 수행하게 하였습니다. 현재 시간 값을 출력하였으므로 제대로 새로 고침이 되는지 알 수 있습니다.
▼ 아래 그림처럼 HTML 을 실행하게 웹페이지에 시간을 표시해 주고 일정시간이 지났을때 새로 고침되면서 다시 시간을 표시해 줍니다.
▼ reload() 함수는 현재 웹 페이지를 다시 불러오게 합니다. 브라우저에서 F5 단축키를 누른것과 같습니다. reload() 에 true 를 입력했을 때와 아무것도 넘기지 않았을 때는 다르게 동작합니다.
¤ window.location.reload() : 컴퓨터에 이미 받아놓은 캐쉬파일을 뒤지고 없으면 서버에서 파일을 받아옵니다.
¤ window.location.reload(true) : true 가 들어가게 되면 캐쉬파일은 무시하고 무조건 서버에서 받아오게 됩니다.
setTimeout() 함수의 첫번째 인수로 reload() 함수를 넘기고 두번째 인수로 반복할 시간을 전달합니다. 새로 고침할때마다 현재 시간을 표시하기 때문에 제대로 되는지 쉽게 알수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>자동 새로 고침 예제</title>
</head>
<body>
<h1>자동 새로 고침 예제</h1>
<p>이 페이지는 5초마다 자동으로 새로 고칩니다.</p>
<script>
// 5초마다 페이지를 새로 고침하는 함수
function refreshPage() {
location.reload(); // 현재 페이지 새로고침
}
// 5초마다 refreshPage 함수 호출
setInterval(refreshPage, 5000); // 밀리초 단위이므로 5초는 5000밀리초
</script>
</body>
</html>
반응형
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트(Javascript) jQuery 의 선택자(Selector) 기본 사용법 (1) | 2024.11.17 |
|---|---|
| 자바스크립트 반복문 종료, 유지 구문 continue, break 사용하기 (0) | 2024.11.12 |
| 자바스크립트 스크롤 최상단, 최하단 이동하는 방법 (0) | 2024.11.12 |
| 자바스크립트(Javascript) Date() 함수 (0) | 2024.08.08 |
| 자바스크립트(JavaScript) 웹 소스 테스트 사이트 소개 (0) | 2024.04.05 |
| 구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법 (0) | 2024.03.20 |
| 자바스크립트 DOM document.write() 함수로 화면에 텍스트를 출력하기 (3) | 2024.02.06 |
| 자바스크립트(Javascript) escape, encodeURI, encodeURIComponent 인코딩 함수 (1) | 2024.01.15 |
