يقدم لك محرر Downcodes شرحًا تفصيليًا لأحداث تحديث صفحة مراقبة JavaScript. تعد مراقبة أحداث تحديث الصفحة أمرًا بالغ الأهمية في تطوير الويب، حيث يمكن أن تساعد المطورين على إجراء بعض العمليات الضرورية عند تحديث الصفحة أو إغلاقها، مثل حفظ بيانات المستخدم وإرسال الطلبات وما إلى ذلك. ومع ذلك، نظرًا للقيود الأمنية للمتصفح، ليس من السهل التمييز بدقة بين تحديث الصفحة وأحداث الإغلاق. ستلقي هذه المقالة نظرة متعمقة على العديد من الطرق الشائعة وتحلل مزاياها وعيوبها لمساعدتك في اختيار الخيار الأنسب.
يمكن لـ JavaScript مراقبة أحداث تحديث الصفحة بعدة طرق، والطريقة الأكثر شيوعًا هي استخدام مستمعي الأحداث قبل التحميل وإلغاء التحميل. ومع ذلك، من المهم ملاحظة أنه من الصعب تقنيًا مراقبة عمليات تحديث الصفحة فقط دون مراقبة أحداث الإغلاق، نظرًا للقيود الأمنية للمتصفح، يتم عادةً تشغيل هذين الحدثين في نفس الوقت. ومع ذلك، باستخدام بعض الحيل، يمكنك محاولة التمييز بين هذين الحدثين: على سبيل المثال، عن طريق تعيين ملف تعريف ارتباط أو استخدام sessionStorage لتسجيل الحالة، والتحقق من هذه الحالات عندما يقوم المستخدم بتحميل الصفحة مرة أخرى لتحديد ما إذا كان قد تم تحميل الصفحة بسبب للتحديث أو الإغلاق.
عندما يحاول المستخدم تحديث الصفحة، يمكن إجراء مستوى معين من المراقبة من خلال حدث beforeunload.
window.addEventListener('beforeunload'، الوظيفة (e) {
// قم بتعيين رسالة تحذير لعرضها عند التحديث
var ConfirmMessage = 'هل أنت متأكد من رغبتك في تحديث الصفحة؟ ';
(e || window.event).returnValue = ConfirmMessage;
رسالة تأكيد الإرجاع؛
});
سينبثق هذا الرمز في مربع حوار التأكيد عندما يقوم المستخدم بتحديث الصفحة. ومع ذلك، يتم تشغيله أيضًا عندما يحاول المستخدم إغلاق الصفحة. ولذلك، هذه ليست طريقة دقيقة للتمييز بين التحديث وإيقاف التشغيل.
يمكن تسجيل معلومات حالة المستخدم أثناء الجلسة من خلال sessionStorage، وهي صالحة فقط ضمن علامة تبويب المتصفح الحالية، وسيتم مسح البيانات المخزنة في sessionStorage.
// يتم تنفيذه عند تحميل الصفحة
نافذة.onload = وظيفة () {
إذا (sessionStorage.getItem(is_reloaded)) {
console.log(تم تحديث الصفحة);
}
sessionStorage.setItem(is_reloaded, true);
};
window.addEventListener('beforeunload'، الوظيفة (e) {
إذا (!نافذة.مغلقة) {
sessionStorage.removeItem(is_reloaded);
}
});
في هذا المثال، قمنا بتعيين العنصر is_reloaded في sessionStorage عند تحميل الصفحة. عندما يتم تحديث الصفحة، يظل العنصر موجودًا، حتى نتمكن من معرفة ما إذا كان قد تم تحديث الصفحة عن طريق التحقق من is_reloaded. لا يمكن لهذه الطريقة أيضًا التمييز بدقة بين التحديث والإغلاق، ولكن مع تحليل أنماط سلوك المستخدم، يمكنها توفير درجة معينة من التمييز.
توفر واجهة برمجة تطبيقات رؤية الصفحة القدرة على اكتشاف ما إذا كانت الصفحة مرئية للمستخدم، ويمكن استخدامها أيضًا لتحديد سلوك المستخدم بشكل غير مباشر.
document.addEventListener('visibilitychange', function() {
إذا (document.visibilityState === 'مخفي') {
// غادر المستخدم الصفحة الحالية، ربما عن طريق الإغلاق أو القفز
}
إذا (document.visibilityState === 'مرئي') {
// تصبح الصفحة مرئية، إما عن طريق الفتح أو التحديث أو التبديل مرة أخرى من علامة تبويب أخرى
}
});
من خلال واجهة برمجة التطبيقات هذه، يمكنك إجراء بعض المعالجة عندما يغادر المستخدم الصفحة، ثم إصدار حكم عندما يعود المستخدم إلى الصفحة. ومع ذلك، هذا لا يراقب بدقة أحداث التحديث فقط.
يمكنك تعيين ملف تعريف الارتباط في JavaScript ومنح ملف تعريف الارتباط وقتًا قصيرًا لانتهاء الصلاحية، والتحقق من وجود ملف تعريف الارتباط عندما يقوم المستخدم بالتحديث، والحكم عليه بناءً على الطابع الزمني:
//تعيين ملفات تعريف الارتباط
وظيفة setCookie (الاسم، القيمة، الثواني) {
تنتهي صلاحية var = تاريخ جديد(Date.now() + ثواني * 1000);
document.cookie = name + = + value + ;expires= +expires.toUTCString();
}
// احصل على ملفات تعريف الارتباط
الدالة getCookie(الاسم) {
var keyValue = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
إرجاع قيمة المفتاح؟
}
// مراقبة التحديث
window.addEventListener('load', function() {
var lastTime = getCookie('last_refresh_time');
فار currentTime = Date.now();
إذا (lastTime && currentTime - parseInt(lastTime) < 1000) {
// إذا كان الفرق بين الطابعين الزمنيين أقل من ثانية واحدة، فسيتم اعتباره حدث تحديث
console.log(تم تحديث الصفحة);
}
setCookie('last_refresh_time',currentTime, 1);
});
ومن خلال ضبط ملف تعريف الارتباط والتحقق منه والاختلاف عن الوقت الحالي، قد نتمكن من استنتاج ما إذا كان قد تم تحديث الصفحة أم تم فتحها للتو. ومع ذلك، نظرًا لأن ملفات تعريف الارتباط يمكن أن تمتد عبر النوافذ وعلامات التبويب، فإن هذا لا يزال ليس الحل الأمثل.
1. كيف يمكن مراقبة أحداث تحديث الصفحة من خلال JavaScript؟
يمكنك مراقبة أحداث تحديث الصفحة من خلال JavaScript لتنفيذ العمليات ذات الصلة. إحدى الطرق هي استخدام الحدث beforeunload.
window.addEventListener('beforeunload', function(event) { // يتم تنفيذ التعليمات البرمجية قبل تحديث الصفحة // على سبيل المثال، إرسال الطلبات، وحفظ البيانات، وما إلى ذلك });2. كيف يمكن مراقبة أحداث تحديث الصفحة فقط وليس أحداث إغلاق الصفحة في JavaScript؟
إذا كنت تريد مراقبة حدث تحديث الصفحة فقط وليس حدث إغلاق الصفحة، فيمكنك استخدام حدثي beforeunload وunload معًا.
window.addEventListener('beforeunload', function(event) { // يتم تنفيذ التعليمات البرمجية قبل تحديث الصفحة // على سبيل المثال، إرسال الطلبات وحفظ البيانات وما إلى ذلك }); window.addEventListener('unload', function(event) { // يتم تنفيذ التعليمات البرمجية عند إغلاق الصفحة // على سبيل المثال، تنظيف الموارد، وتوفير وقت الخروج، وما إلى ذلك });بهذه الطريقة، عندما يقوم المستخدم بتحديث الصفحة، سيتم تشغيل الحدث beforeunload، وعندما يغلق المستخدم الصفحة، سيتم تشغيل كل من الحدثين beforeunload وunload.
3. كيف يمكن مراقبة أحداث تحديث صفحات الويب فقط في JavaScript مع استبعاد مراقبة طرق التنقل الأخرى؟
إذا كنت تريد فقط مراقبة حدث التحديث لصفحة الويب، وليس طرق التنقل الأخرى (مثل النقر فوق رابط أو النقر فوق زر الأمام/الخلف)، فيمكنك استخدام الحدث beforeunload بالتزامن مع واجهة PerformanceNavigation.
window.addEventListener('beforeunload', function(event) { // تحديد ما إذا كان حدث تحديث صفحة ويب if (performance.navigation.type === Performance.navigation.TYPE_RELOAD) { // تم تنفيذ التعليمات البرمجية قبل تحديث الصفحة // على سبيل المثال، إرسال الطلبات وحفظ البيانات والعمليات الأخرى}});استخدم Performance.navigation.type لتحديد نوع التنقل إذا كان TYPE_RELOAD، فهذا يعني أنه يتم تشغيل الصفحة بواسطة عملية تحديث. بهذه الطريقة، سيتم تنفيذ التعليمات البرمجية المقابلة فقط في حدث تحديث صفحة الويب.
آمل أن يساعدك المحتوى أعلاه على فهم طريقة مراقبة حدث تحديث صفحة JavaScript بشكل أفضل. يذكرك محرر Downcodes أنه في التطبيقات الفعلية، تحتاج إلى اختيار الطريقة المناسبة وفقًا للاحتياجات المحددة والتعامل مع التوافق.