บางครั้งคุณจำเป็นต้องรีเฟรชหน้าเว็บโดยใช้ JavaScript หากมีความจำเป็น ให้ใช้วัตถุตำแหน่งเพื่อใช้ reload() กระบวนการ.
<!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 = [ "http://placekitten.com/200/300", "http://placekitten.com/210/310", "http://placekitten.com/300/300", "http://placekitten.com/300/200", "http://placekitten.com/310/210", "http://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>
มีผู้ฟังเหตุการณ์สองคนในเอกสารนี้ ครั้งแรกเกิดขึ้นเมื่อโหลดหน้าเพื่อเพิ่ม <img /> ไปที่ DOM ส่วนที่สองมี reload() . ของเรา การทำงาน. เมื่อผู้ใช้คลิกที่ “คลิกฉัน!” หน้าจะโหลดซ้ำโดยเรียก handleClick() การทำงาน. หน้านี้ใช้ JavaScript เพื่อจัดการกับตรรกะทั้งหมดของเรา
ในตัวอย่างนี้ รูปภาพแมวสุ่มจากอาร์เรย์ของรูปภาพแมวจะแสดงทุกครั้งที่โหลดหน้าซ้ำ
ค่าจริงหรือเท็จที่ส่งเข้ามาจะระบุว่าหน้านั้นโหลดซ้ำจากเซิร์ฟเวอร์หรือจากแคชของเบราว์เซอร์หรือไม่ ค่าเริ่มต้นเป็นเท็จ ซึ่งจะโหลดหน้าซ้ำจากแคช ดังนั้นจึงไม่จำเป็นต้องส่งค่าเข้าไป เว้นแต่คุณต้องการโหลดหน้าซ้ำจากเซิร์ฟเวอร์
เท่านั้น!
