بسم الله الرحمن الرحيم
تساعد إعادة التحميل التلقائي على إعادة تحميل التحديث الأخير على صفحة الويب. إنه يعزز تجربة المستخدم لرؤية المحتوى الجديد دون تدخل يدوي. هناك طرق مختلفة لتحقيق إعادة تحميل الصفحة. تسرد هذه المقالة بعضًا منها باستخدام JavaScript.
يستخدم هذا المثال السريع طريقة JavaScript setTimeout() لتعيين مؤقت إعادة تحميل الصفحة. في هذا المثال، يتم إعادة تحميل الصفحة بعد كل 5000 مللي ثانية.
مثال سريع
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Reload Page in JavaScript after (n) Seconds Example</title>
</head>
<body>
<h1>Reload Page in JavaScript after 5 Seconds</h1>
<script type="text/javascript">
// Reload the page after 5 seconds
setTimeout(function () {
location.reload();
}, 5000);
</script>
</body>
</html>أعد تحميل الصفحة باستخدام JavaScript History.go
يقوم History.go() بتحميل صفحة معينة من خلال فهرس الجلسة الخاص بها. تتلقى هذه الطريقة فهرس الجلسة الاختياري. في هذه المقالة، يتم استخدامه لإعادة تحميل الصفحة الحالية عن طريق تمرير فهرس الجلسة بالقيمة 0. إذا كان فهرس الجلسة فارغًا أو 0، فسيقوم استدعاء الأسلوب هذا بمحاكاة تأثير location.reload().
كود JavaScript أدناه يستدعي History.go() مع مؤقت:
كود JavaScript أدناه يستدعي History.go() مع مؤقت:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Reload Page in JavaScript after Seconds using history function</title>
</head>
<body>
<h1>Reload Page in JavaScript after 5 Seconds using history function</h1>
<script type="text/javascript">
// Reload the page after 5 seconds using history function
setTimeout(function () {
history.go(0);
}, 5000);
</script>
</body>
</html>إعادة تحميل الصفحة باستخدام طريقة الاستطلاع
بدلًا من JavaScript setTimeout()، يمكننا أيضًا استخدام التابع setInterval() لاستدعاء إعادة التحميل على فترات زمنية دورية. يعطي setInterval() مخرجات أقرب نسبيًا (أحيانًا يتأخر اعتمادًا على العملية التي تتم على الخيط الرئيسي، إن وجدت). لقد رأينا تفاصيل التعليمات البرمجية "كيفية الانتظار ثانية واحدة في JavaScript".
يستخدم رمز المثال هذا JavaScript setInterval() لتكرار الاستقصاء في فاصل زمني قدره 3000 مللي ثانية. تقوم الدالة fetchData() بإنشاء رقم عشوائي واستدعاء طريقة لتحديث محتوى الصفحة. يبحث الاستقصاء عن الرقم العشوائي الجديد الذي تم إنشاؤه ويقوم بتحديث واجهة المستخدم بشكل دوري.
يستخدم رمز المثال هذا JavaScript setInterval() لتكرار الاستقصاء في فاصل زمني قدره 3000 مللي ثانية. تقوم الدالة fetchData() بإنشاء رقم عشوائي واستدعاء طريقة لتحديث محتوى الصفحة. يبحث الاستقصاء عن الرقم العشوائي الجديد الذي تم إنشاؤه ويقوم بتحديث واجهة المستخدم بشكل دوري.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Polling Example that uses periodic calls after 3 secs</title>
<script type="text/javascript">
function fetchData() {
// Simulating AJAX request to fetch data from the server
// This is a stub - replace this with your own AJAX implementation
setTimeout(function () {
// this is sample data from server
// I am just using random to simulate it
var data = Math.random();
updatePage(data); // Call function to update the page with the fetched data
}, 3000); // Polling interval: 3 seconds (3000 milliseconds)
}
function updatePage(data) {
// Update the page with the fetched data
document.getElementById("data-container").innerHTML = data;
}
// Start the polling when the page loads
window.onload = function () {
fetchData();
setInterval(fetchData, 3000); // Repeat the polling every 3 seconds
};
</script>
</head>
<body>
<h1>Polling Example - Refresh after 3 seconds</h1>
<p>How to use polling to periodically fetch new data from a server and update the page without reloading it.</p>
<div id="data-container"></div>
</body>
</html>