home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

JavaScript:รีเฟรชหน้า

บางครั้งคุณจำเป็นต้องรีเฟรชหน้าเว็บโดยใช้ 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 = [ "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>

มีผู้ฟังเหตุการณ์สองคนในเอกสารนี้ ครั้งแรกเกิดขึ้นเมื่อโหลดหน้าเพื่อเพิ่ม <img /> ไปที่ DOM ส่วนที่สองมี reload() . ของเรา การทำงาน. เมื่อผู้ใช้คลิกที่ “คลิกฉัน!” หน้าจะโหลดซ้ำโดยเรียก handleClick() การทำงาน. หน้านี้ใช้ JavaScript เพื่อจัดการกับตรรกะทั้งหมดของเรา

ในตัวอย่างนี้ รูปภาพแมวสุ่มจากอาร์เรย์ของรูปภาพแมวจะแสดงทุกครั้งที่โหลดหน้าซ้ำ

ค่าจริงหรือเท็จที่ส่งเข้ามาจะระบุว่าหน้านั้นโหลดซ้ำจากเซิร์ฟเวอร์หรือจากแคชของเบราว์เซอร์หรือไม่ ค่าเริ่มต้นเป็นเท็จ ซึ่งจะโหลดหน้าซ้ำจากแคช ดังนั้นจึงไม่จำเป็นต้องส่งค่าเข้าไป เว้นแต่คุณต้องการโหลดหน้าซ้ำจากเซิร์ฟเวอร์

เท่านั้น!