কখনও কখনও আপনাকে 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() ফাংশন আছে। যখন একজন ইউজার "Click Me!"-এ ক্লিক করে, পেজটি handleClick() ফাংশন ট্রিগার করে রিলোড হবে। এই পেজে JavaScript প্রায় সব লজিক হ্যান্ডল করে।
এই নির্দিষ্ট উদাহরণে, পেজ প্রতিবার রিলোড হলে ক্যাট পিকচার্সের একটি অ্যারে থেকে একটি র্যান্ডম ক্যাট পিকচার ডিসপ্লে হবে।
পাস করা true বা false ভ্যালু ইন্ডিকেট করবে পেজটি সার্ভার থেকে রিলোড হচ্ছে কিনা বা ব্রাউজার ক্যাশ থেকে। ডিফল্ট ভ্যালু false, যা পেজটি ক্যাশ থেকে রিলোড করে, তাই কোনো ভ্যালু পাস করার প্রয়োজন নেই যদি না আপনি পেজটি সার্ভার থেকে রিলোড করতে চান।
এটাই সব!
