ایجاد: ۹:۱۰ ۱۳۹۳/۱۲/۱۸

یادداشت‌ها

»

کار با قابلیت Page Visibility و کاربردهای آن

در مشاهده صفحه شما، کاربر ممکن است چند وضعیت داشته باشد. مثلا ممکن است در حال مشاهده صفحه شما باشد. ممکن است به tab/window دیگری رفته باشد یا اصلا براوزر را مینیمایز کرده باشد و صفحه شما را مشاهده نکند و ....
هم اکنون اکثر براوزرها این امکان را برای شما فراهم می‌آورند که بتوانید این وضعیت را تشخیص دهید.

این قابلیت کاربردهای فراوانی دارد. مثلا می‌توانید زمانی که کاربر صفحه شما را نمی‌بیند، پخش ویدئو، اسلایدر و ... را متوقف کنید و پس از رجوع کاربر به صفحه شما، آن را از سر بگیرید. یا مثلا ارسال درخواست‌های مستمر ای‌جکسی برای آپدیت بخشی از صفحه را می‌توان در زمان فعال نبودن پنجره متوقف یا به مقدار بسیار کمتری رساند.

روش استفاده از این قابلیت

برای استفاده از این قابلیت می‌توانید از پلاگین visibility.js استفاده کنید یا از کدهایی که در ادامه به نقل از این مطلب درج می‌شود، استفاده کنید.
زمانی که پنجره شما از دید کاربر مخفی می‌شود، از document.hidden قابل تشخیص است. اما یک مشکل کوچک اینجاست که در برخی مرورگرها، بجای متد hidden باید از متدهایی با نام webkitHidden, msHidden و ... استفاده کرد. لذا از تابع زیر را برای استخراج آن استفاده می‌کنیم:

function getHiddenPrefix(){
    var prefixes = ['webkit','moz','ms','o'];
    if ('hidden' in document) return '';
    for (var i = 0; i < prefixes.length; i++)
        if ((prefixes[i] + 'Hidden') in document) 
            return prefixes[i];
    // براوزر پشتیبانی نمی‌کند
    return false;
}
حال می‌توانیم یک تابع تعریف کنیم که با توجه به آن، متوجه شویم صفحه قابل دیدن هست یا خیر:
function isHidden() {
    var prefix = getHiddenPrefix();
    if (false===prefix) return false;
    return document[ (''==prefix) ? 'hidden' : prefix+'Hidden' ];
}
کد فوق برای این بود که بفهمیم در این لحظه پنجره در حال مشاهده است یا خیر. در صورتی که بخواهیم هر زمان وضعیت دیدن صفحه تغییر کرد، اطلاع پیدا کنیم تا بتوانیم عملیات خاصی را انجام دهیم، می‌توانیم از رویداد visibilitychange استفاده کرد که البته مشابه پراپرتی hidden با پیشوندهای مختلفی می‌تواند همراه باشد مانند webkitvisibilitychange, msvisibilitychange و ...
var prefix = getHiddenPrefix();
if (false!==prefix)
    document.addEventListener(prefix+'visibilitychange', function(){...});

با مرورگرهایی که پشتیبانی نمی‌کنند چه کنیم؟!

هرچند تقریبا همه مرورگرهای جدید از این امر پشتبانی می‌کنند اما کسانی که بخواهند %100 کاربران را پوشش دهند، می‌توانند 2 کار انجام دهند؛
  1. پیش‌فرض را روی این قرار دهند که کاربر در حال مشاهده صفحه است. اگر براوزر کاربر از این امر پشتیبانی کرد که این پیشفرض را تغییر می‌دهد. اما اگر کاربر جز عده‌ی بسیار قلیلی بود که مرورگرش از این امر پشتیبانی نمی‌کند، بنابه پیشفرض مذکور، فرض می‌شود که کاربر در حال مشاهده صفحه است که مشکلی برایش پیش نیاید.
  2. زمانی که کاربری وارد صفحه می‌شود، بالاخره یک کاری انجام می‌دهد. یا کلیدی را می‌فشارد یا موس را حرکت می‌دهد یا صفحه را اسکرول می‌کند و ...
    این کارها هرچند نشان از حضور او در صفحه دارد اما لزوما به معنای آن نیست که از همان لحظه که این رویدادها رخ داد، وارد صفحه شده. ممکن است کمی قبل‌تر از آن وارد صفحه شده باشد. به هر حال برای تشخیص Page Visibility با کمک این روش، می‌توان کدی که قبلا برای تشخیص idle بودن معرفی کرده بودم، استفاده کنید مثلا به این صورت:
var idle=false, events="mousemove keydown wheel DOMMouseScroll mousewheel mousedown touchstart touchmove MSPointerDown MSPointerMove";
function active(){
  $(document).unbind(events);
  idle=false;
  return true;
}
setInterval(function(){
    if(!idle)
      $(document).bind(events, active);
    idle=true;
  }, 5E3); // اگر کاربر حداکثر 5 ثانیه هیچ تعاملی با صفحه نکند، متغیر مربوطه ست میشود
$(window).blur(function(){idle=true;})
$(window).focus(function(){idle=false;})

یادداشت‌های مرتبط
  1. کشیدن و انداختن (رها کردن)
  2. API چیست؟
  3. برنامه‌های تحت وب آفلاین، چرا و چگونه؟
  4. نمودارها در صفحات وب
  5. نقشه Google در سایت شما
  6. ابرکوکی و ذخیره‌ساز جدید HTML5
  7. انیمیشن با CSS
  8. روش های بهبود کیفیت آپلود فایل ها از طریق فرم های صفحات وب
  9. انواع روش‌های شناسایی و احراز هویت کاربران یک صفحه وب
  10. ساخت PDF آنلاین
  11. اعتبارسنجی و شکل‌دهی فرم‌ها با استفاده از html5
  12. ادیتورهای محتوای غنی‌شده برای صفحات وب
  13. html نسخه 5
  14. پخش‌کننده‌های فایل صوتی تصویری در صفحات وب
  15. برنامه نویسی اندروید
  16. بهینه سازی و کاهش حجم تصاویر برای استفاده در صفحات وب
  17. ارسال و دریافت ایمیل با PHP و ساختن اکانت ایمیل
  18. کار با تصاویر در سمت کاربر
  19. همه آن چیزهایی که لازم است درباره‌ی فید بدانید
  20. بهینه سازی آنلاین سی‌اس‌اس و جاوا اسکریپت

مدیریت

نام وسیله

اعتبار ورود

نام کاربری

رمز عبور

رمز یکبارمصرف

... لیست تمام یادداشت‌ها

تبلیغات

ربات‌های تلگرامی:
مجموعه ربات‌های تلگرامی ما برای ساده‌تر کردن کار با تلگرام و مدیریت کانال و ...
خرید هاست (فضا):
دنبال یک هاست به صرفه برای شروع کار می‌گردید؟
مشخصات و قیمت‌های این مورد رو ببینید. من سال‌ها مشتری‌شون بودم و پشتیبانی‌شون هم خوب بود.
دامنه‌های فروشی:
دامنه‌های زیر مربوط به ما یا مشتریان ماست که قابل فروش هستند. در صورت تمایل به خرید یکی از آنها، مبلغ پیشنهادی را از طریق فرم ارتباطی برای ما ارسال نمایید.

دامنه‌هایی که می‌تواند مصرف مذهبی داشته باشد:
دامنه‌هایی که می‌تواند مصرف تخصصی داشته باشد:
دامنه‌هایی که می‌تواند مصرف شخصی/عمومی داشته باشد: