18
تشکر

آشنایی با page visibility api در HTML5

اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

با استفاده از page visibility api در HTML5 میتوان وضعیت صفحه را در مرورگر کاربر تشخیص داد. برای مثال اگر کاربر روی صفحه دیگری فوکوس کرده باشد و صفحه ما مخفی باشد با استفاده از این API میتوان اینگونه تغیییرات را مطلع شد.

این API در وضعیت Recommendation قرار دارد و میتوان با آسودگی از آن استفاده کرد.

در ادامه مطلب همراه ما باشید…

document.hidden

با استفاده از این مشخصه میتوان فهمید در حال حاظر آیا صفحه ما در وضعیت فوکوس قرار دارد یا خیر یا به عبارتی دیگر آیا کاربر در حال مشاهده صفحه ما است یا نه.

alert(document.hidden)

کد بالا در صورتی که صفحه ما در وضعیت hidden باشد، true و در غیر اینصورت false برمیگرداند. اما مرورگرهای مختلف دارای پیشوندهای مخصوص به خود هستند که به صورت زیر میتوان آن را حل کرد (در روش زیر هر بار که بخواهید از document.hidden استفاده کنید باید کد بالایی آن را نیز اجرا کنید).

document.hidden = document.hidden || document.mozHidden || document.msHidden || document.webkitHidden || undefined;
alert(document.hidden);

visibilityChange Event

با استفاده از رویداد visibilityChange میتوان هر زمان که تغییری در وضعیت صفحه ایجاد شد را دریافت کنیم. این رویداد نیز در مرورگرهای مختلف دارای پیشوند مخصوص به خود است، که با استفاده از کد زیر میتوان هم پیشوند این رویداد و هم پیشوند document.hidden را بدست آورد.

var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

حالا که پیشوند را بدست آوردیم میتوانیم از رویداد  visibilityChange استفاده کنیم.

document.addEventListener(visibilityChange, handleVisibilityChange, false);

function handleVisibilityChange() {
  if (document[hidden]) {
    //Page is hidden
  } else {
    //Page is visible
  }
}

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

برای مثال در این صفحه زمانی که شما صفحه را hidden میکنید ویدئو pause میشود.

پشتیبانی مرورگرها

تمام مرورگرهای دسکتاپ و موبایل در آخرین نسخه به غیر از Opera mini از این API پشتیبانی میکنند.

اطلاعات بیشتر

لینک های مفید

MDN: Using the Page Visibility API

HTML5Rocks

An Introduction to The Page Visibility API

  • خب این که کار همون تابع focus رو انجام میده و چیز زیاد کاربردی نیست و معلومه که هنوز همه مرورگرها به طور کامل پشتیبانیش نمیکنن برای همینم هر مرورگر یه پسوند خاص خودش رو گذاشته کنارش.
    برای تنظیم فوکوس روی صفحه یا پنجره خودمون میتونیم از خاصیت focus در شی window استفاده کرد.

    • محسن شفیعی می‌گه:

      این API با تابع focus فرق میکنه. با استفاده از این API میتونی بفهمی که آیا کاربر روی تب صفحه شما است یا تب های دیگه رو داره میبینه و همچنین توسط event مربوط میتونید تغییرات رو رصد بکنید.
      خیلی بعیده W3 توی چیزی اونم به این واضحی اشتباه کنه.

  • مهدی می‌گه:

    خیلی وقت بود دنبال این مطلب بودم ولی فراموش میکردم که برم سراقش. ممنون


  • نظرات این مطلب بسته است.