JavaScript Refresh Page: วิธีโหลดหน้าเว็บใหม่ด้วย location.reload()

บางครั้งต้อง refresh webpage ด้วย JavaScript ใช้ location object เรียกเมธอด reload()

ตัวอย่างโค้ดเต็ม

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Page Reload Demo</title>
</head>
<body onload="handleLoad()">
  <button id="btn">Click Me!</button>
  <script>
    let arrayKittens = [
      "https://placekitten.com/200/300",
      "https://placekitten.com/210/310",
      "https://placekitten.com/300/300",
      "https://placekitten.com/300/200",
      "https://placekitten.com/310/210",
      "https://placekitten.com/400/300"
    ];

    let button = document.querySelector("#btn");
    button.style.display = "block";
    button.style.margin = '20px 0px';

    const handleClick = (e) => {
      console.log("click");
      location.reload(true); // reload จาก server
    };

    button.addEventListener("click", handleClick);

    let body = document.querySelector("body");
    let image = document.createElement("img");

    const handleLoad = (e) => {
      console.log("loaded");
      let random = Math.floor(Math.random() * arrayKittens.length);
      let newImg = arrayKittens[random];
      image.setAttribute("src", newImg);
      image.setAttribute("width", "300");
      image.setAttribute("height", "300");
      image.setAttribute("alt", "arrayKittens[" + random + "]");
      image.style.objectFit = "cover";
      body.appendChild(image);
    };
  </script>
</body>
</html>

คำอธิบาย

มี 2 event listeners:

1. onload="handleLoad()" - เมื่อโหลดหน้า จะเพิ่ม <img> เข้า DOM แบบสุ่มจาก array
2. ปุ่ม "Click Me!" - เมื่อคลิก เรียก handleClick() ซึ่งมี location.reload(true) โหลดหน้าใหม่

ทุกครั้งที่ reload รูปแมวจะสุ่มใหม่จาก array

Parameter true/false ของ reload()

• true: โหลดจาก server (force reload)
• false (default): โหลดจาก browser cache

ค่า default เป็น false ไม่ต้องส่ง parameter ถ้าไม่ได้ต้องการ force reload จาก server

สรุป

ใช้ location.reload() สำหรับ refresh หน้า ส่ง true ถ้าต้องการโหลดจาก server ส่ง false หรือไม่ส่งก็ได้ถ้าใช้ cache ได้