Javascriptを使用して、現在のページを更新する

Last Updated:2024年01月30日| , 4のコメント

いくつかの方法を使用して、現在のページを更新(リロード)することができます。

Javascript Refreshはいろいろな理由で使わない方が良く、リダイレクトはGoogleから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を使用してページを更新する

JavaScriptを使用したリフレッシュは望ましくなく、PHPを使用することをお勧めします。例:

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

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

JavaScriptを使ったリダイレクトの場合、Googleからペナルティを受けることができるそうです。 JavaScriptリダイレクトの代わりにPHPを使用できます。例:

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

Div内のコンテンツを定期的に更新する

たとえば、1分ごと...内容を更新したい場合は、次のJavaScriptでテストできます。

<!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>

Javascriptを/ jQueryテンプレート:

機能を直接実装することの難しさを経験したり、時間を節約したい場合 WordPress プラグインなどを販売している CodeCanyonで、比較的低コストでJavascript / jQueryテンプレートやPHPスクリプトを購入することができます。

コードキャニオンで販売されているjavascript / jQueryテンプレート
CodeCanyonで販売されているjavascript / jQueryテンプレート

WordPressを使用する場合、多くの機能をプラグインを使用して実装が可能です。

※パートナーズの活動に一定額の手数料を受け取ることができます。

メモ:


4のコメント

コメント