कभी-कभी आपको जावास्क्रिप्ट का उपयोग करके किसी वेबपेज को रीफ्रेश करने की आवश्यकता होती है। यदि आवश्यकता होती है, तो 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 /> . जोड़ने के लिए लोड होता है डोम को। दूसरे में हमारा reload() है समारोह। जब कोई उपयोगकर्ता "मुझे क्लिक करें!" पर क्लिक करता है, तो पेज handleClick() को ट्रिगर करके फिर से लोड होगा। समारोह। यह पृष्ठ हमारे सभी तर्कों को संभालने के लिए जावास्क्रिप्ट का उपयोग करता है।
इस विशेष उदाहरण में, बिल्ली चित्रों की एक सरणी से एक यादृच्छिक बिल्ली चित्र हर बार पृष्ठ के पुनः लोड होने पर प्रदर्शित होगा।
पास किया गया सही या गलत मान इंगित करेगा कि पृष्ठ सर्वर से या ब्राउज़र कैश से पुनः लोड किया गया है या नहीं। डिफ़ॉल्ट मान गलत है, जो कैश से पृष्ठ को पुनः लोड करता है, इसलिए जब तक आप सर्वर से पृष्ठ को पुनः लोड नहीं करना चाहते तब तक कोई मान पास करने की कोई आवश्यकता नहीं है।
इसमें बस इतना ही है!