JavaScript: Tải lại trang (Refresh Page)

Đôi khi bạn cần tải lại trang web bằng JavaScript. Khi cần, hãy dùng đối tượng location để gọi phương thức reload().

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Reload Demo</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body onload="handleLoad()">
  <button id="btn">Nhấn vào đây!</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);
    }
    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>

Trong tài liệu này có hai event listener. Listener đầu tiên chạy khi trang tải để thêm <img /> vào DOM. Listener thứ hai chứa hàm reload(). Khi người dùng nhấn "Nhấn vào đây!", trang sẽ tải lại bằng cách kích hoạt hàm handleClick(). Trang này dùng JavaScript xử lý hầu hết logic.

Trong ví dụ này, mỗi lần tải lại trang sẽ hiển thị hình ảnh mèo ngẫu nhiên từ mảng hình ảnh mèo.

Giá trị true hoặc false truyền vào cho biết trang tải lại từ server hay từ cache trình duyệt. Giá trị mặc định là false (tải từ cache), nên không cần truyền giá trị trừ khi muốn tải từ server.

Đó là tất cả!