التعليق: لقد فقدنا منذ فترة طويلة طريقة لتحديد ما إذا كان المستخدم يتصفح علامة تبويب محددة. هل زار المستخدمون مواقع الويب الأخرى؟ هل عادوا إلى الوراء؟
الآن ، توفر واجهة رؤية الصفحة في HTML5 للمبرمجين طريقة لاستخدام حدث صفحة الرؤية للحكم على حالة رؤية الصفحة الحالية وأداء مهام معينة بطريقة مستهدفة. هناك أيضًا وثيقة جديدة. خاصية hidden يمكن استخدامها.
document.hidden
تُظهر هذا المستند الذي تم عرضه حديثًا. الخاصية hidden ما إذا كانت الصفحة هي الصفحة التي يتم عرضها حاليًا من قبل المستخدم ، مع قيمة ture أو false.
document.vibilityState
تكون قيمة Scinibibility State إما مرئية (تشير إلى أن الصفحة يتم تنشيطها حاليًا بواسطة المتصفح ، ولا يتم تقليل النافذة) ، أو مخفية (لا يتم تنشيط الصفحة حاليًا بواسطة صفحة علامة التبويب ، أو يتم تقليل النافذة.) ، أو Prerender (تتجدد الصفحة ولا تُظهر للمستخدم.).
حدث تشكيل الرؤية
من السهل جدًا الاستماع إلى تغييرات رؤية الصفحة:
// متوافق مع المتصفحات المختلفة
var Hidden ، State ، CorrabilityChange ؛
if (typeof document.hidden! == "undefined") {
مخفي = "مخفي" ؛
CorrabilityChange = "CorrabilityChange" ؛
State = "CompanibilityState" ؛
} آخر إذا (typeof document.mozhidden! == "undefined") {
Hidden = "Mozhidden" ؛
CorrabilityChange = "MozvisibilityChange" ؛
State = "MozvisibilityState" ؛
} آخر إذا (typeof document.mshidden! == "غير محدد") {
Hidden = "mshidden" ؛
CorrabilityChange = "msvisibilityChange" ؛
State = "msvisibilitystate" ؛
} آخر إذا (typeof document.webkithidden! == "غير محدد") {
Hidden = "WebKithidden" ؛
CorrabilityChange = "WebKitVisibilityChange" ؛
State = "WebKitvisibilityState" ؛
} </p> <p> // أضف مستمعًا لعرض تغييرات الحالة في العنوان
document.adDeventListener (CorrabilityChange ، function () {
document.title = document [state] ؛
} ، خطأ) ؛ </p> <p> // التهيئة
document.title = document [state] ؛
سوف يعدل الرمز أعلاه قيمة المستند. title عندما تتغير رؤية الصفحة!
لذا ، متى تحتاج إلى استخدام حدث CorrabilityChange؟ على سبيل المثال ، إذا كان هناك مقطع فيديو مضمن على صفحتك يتم تشغيله ، عندما ينتقل المستخدم إلى علامة تبويب أخرى ، يجب على الفيديو في علامة التبويب الخاصة بك إيقاف التشغيل تلقائيًا ، والاستمرار في التشغيل عند تبديل المستخدم مرة أخرى. على سبيل المثال ، إذا كانت صفحتك تحتوي على إجراء تحديث تلقائي ، عندما ينتقل المستخدم إلى علامات تبويب أخرى ، فيجب عليك التوقف عن التحديث ، ومتابعة الإجراء السابق عند تبديل المستخدم مرة أخرى.