Đôi khi bạn cần làm mới một trang web bằng JavaScript. Nếu cần, hãy sử dụng đối tượng vị trí để sử dụng reload() phương pháp.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</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);
}
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>
Có hai người nghe sự kiện trong tài liệu này. Điều đầu tiên xảy ra khi trang tải để thêm một <img /> vào DOM. Thứ hai chứa reload() của chúng tôi chức năng. Khi người dùng nhấp vào “Nhấp vào tôi!”, Trang sẽ tải lại bằng cách kích hoạt handleClick() chức năng. Trang này sử dụng JavaScript để xử lý tất cả logic của chúng tôi.
Trong ví dụ cụ thể này, một hình ảnh mèo ngẫu nhiên từ một loạt các hình ảnh mèo sẽ hiển thị mỗi khi tải lại trang.
Giá trị true hoặc false được truyền vào sẽ cho biết trang có được tải lại từ máy chủ hoặc từ bộ nhớ cache của trình duyệt hay không. Giá trị mặc định là false, giá trị này sẽ tải lại trang từ bộ đệm, vì vậy không cần phải chuyển một giá trị vào trừ khi bạn muốn tải lại trang từ máy chủ.
Đó là tất cả những gì cần làm!