Javascript를 사용하여 현재 페이지 새로 고침하기

Last Updated: 2024년 01월 30일 | , | 4개 댓글

여러 가지 방법을 사용하여 현재 페이지를 새로 고침(리로드)할 수 있습니다.

Javascript Refresh는 여러가지 이유로 사용하지 않는 것이 좋고 리디렉션(redirection)은 구글로부터 SEO 페날티를 먹는다고 합니다. 새로 고침(refresh)이나 리디렉션(redirection)을 해야 하는 경우 php로 하는 것이 바람직하다고 합니다.

Javascript를 사용하여 현재 페이지 새로 고침하는 방법

JS에서 location.reload()와 setTimeout() 메소드를 사용할 수 있습니다.

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Auto refresh current page with regular intervals using JS</title>
<script>
setTimeout(function(){
location.reload();
},3000); // 3000밀리초 = 3초
</script>
</head>
// 참조 페이지: Auto refresh current page with regular intervals using JS

window.location.reload() 사용:

<form><input type="button" value="페이지 새로 고침" onClick="window.location.reload()"></form>

history.go() 사용:

<form><input type="button" value="페이지 새로 고침" onClick="history.go(0)"></form>

window.location.href=window.location.href 사용:

<form><input type="button" value="페이지 새로 고침" onClick="window.location.href=window.location.href"></form>

참고로 페이지가 자동으로 새로 고침되도록 하려면 다음과 같은 meta 태그를 head 태그 사이에 추가하면 됩니다.

<META HTTP-EQUIV="refresh" CONTENT="15">

그러면 15초마다 페이지가 자동 새로 고침(리로드)됩니다. 가령 주식 정보 등을 일정 시간 동안 갱신해야 하는 경우에 이 방법을 사용할 수 있습니다.

jQuery로 페이지를 리로드(새로 고침)하려는 경우에는 다음과 같이 location.reload()를 사용하면 됩니다.

$('#something').click(function() {
location.reload();
});
// 참조 페이지: stackoverflow

PHP를 사용하여 페이지 새로 고침

자바스크립트를 이용한 새로 고침은 바람직하지 않고 PHP를 사용하는 것이 좋다고 합니다. 예시:

<?php
// 5초 후에 페이지를 새로고침하도록 설정
header("Refresh:5");

// 여기에 나머지 PHP 코드나 HTML 마크업을 추가
echo "이 페이지는 5초마다 자동으로 새로고침됩니다.";
?>

자바스크립트를 이용한 리디렉션의 경우 구글로부터 페널티를 받을 수 있다고 합니다. 자바스크립트 리디렉션 대신 PHP를 사용할 수 있습니다. 예시:

<?php
header("Location: https://www.google.com");
exit;
?>

Div 내의 콘텐츠를 주기적으로 새로 고침하기

예를 들어, 1분마다 <div>...</div> 내의 내용을 새로 고침하고 싶은 경우 다음과 같은 자바스크립트로 테스트할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Div 새로고침 예제</title>
    <script>
        function updateDivContent() {
            // 예시: Div의 내용 변경
            document.getElementById("refreshableDiv").innerHTML = "업데이트된 내용: " + new Date().toLocaleTimeString();

            // 서버에서 데이터를 가져오려면 여기서 fetch() 또는 XMLHttpRequest를 사용할 수 있습니다.
        }

        window.onload = function() {
            // updateDivContent를 60초마다 호출
            setInterval(updateDivContent, 60000);
        };
    </script>
</head>
<body>
    <div id="refreshableDiv">Div의 초기 내용</div>
</body>
</html>

자바스크립트/jQuery 템플릿:

기능을 직접 구현하는 것에 어려움을 겪거나 시간을 절약하고 싶은 경우 워드프레스 플러그인 등을 판매하는 CodeCanyon에서 비교적 저렴한 비용에 Javascript/jQuery 템플릿이나 PHP 스크립트를 구입할 수 있습니다.

코드캐년에서 판매되는 javascript/jQuery 템플릿
CodeCanyon에서 판매되는 javascript/jQuery 템플릿

워드프레스를 사용하는 경우 많은 기능을 플러그인을 사용하여 구현이 가능합니다.

※파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

참고:

4 개 댓글

Leave a Comment