آموزش رایگان ساخت فول اسکرین کردن (FullScreen) صفحات سایت با جاوا اسکریپت

فول اسکرین کردن صفحات سایت با استفاده از جاوا اسکریپت

همانطور که می دونید Full screen به معنای تمام صفحه هستش، حالا در نظر بگیرید می خواهید وارد سایتی بشید و مقاله ای رو بخونید خب مرورگرتون رو باز می کنید و شروع می کنید به جستجو کردن و وارد سایت هدفتون میشید و خواهید دید در بالا و پایین مرورگر نواری وجود داره حالا برای این که این نوارها حواستون رو پرت نکنن و تمرکز خیلی بالاتری به مطالب داشته باشید تنها با زدن دکمه F11 مرورگرتون تمام صفحه یا همون فول اسکرین میشه که با زدن دکمه Esc می تونید از حالت Full screen خارج بشید.

و اما شما به عنوان یک طراح سایت شاید ایده ای داشته باشید که بخواهید در سایتی که طراحی می کنید بخشی رو پیاده سازی کنید که کاربر با زدن دکمه ای که شما مشخص کردید بتونه مرورگر رو فول اسکرین کنه که دیگه مجبور نباشه کلید F11 رو بزنه بلکه اون برنامه ای که شما پیاده سازی کردید این کار رو انجام بده.

در نسخهٔ HTML5 یک ای‌پی‌آی (API) در اختیار دولوپرها قرار گرفته که با استفاده از آن می‌توان امکانی رو در اختیار کاربران سایت قرار داد که با کلیک بر روی دکمه‌ای خاص، صفحهٔ مرورگر را به حالت فول‌اسکرین درآورد به طور کلی، از جمله کاربردهای این ای‌پی‌آی می‌توان به گیم‌‌های آنلاین، اسلایدشو، نمایش ویدیو و … اشاره کرد علاوه بر اینکه با استفاده از این ای‌پی‌آی هم می‌توان کل صفحه را فول‌اسکرین کرد و هم اِلِمان خاصی رو هدف قرار داد.

بسته به نوع مرورگری که از آن استفاده می‌کنیم، متدهای ارتباط با مرورگر نیز در این ای‌پی‌آی متفاوتند. به طور مثال، در فایرفاکس باید متد mozRequestFullScreen فراخوانی بشه اما این در حالی است که در مرورگرهای گوگل کروم و سافاری که مبتنی بر موتور رِندِرینگ WebKit هستند باید متد webkitRequestFullScreen رو فراخوانی کرد.

این نکته رو هم اضافه کنم که HTML5 Fullscreen API ابزاری کاربردی هستش تا از آن طریق امکانی رو در اختیار کاربران سایت خود قرار دهیم که در نهایت منجر به ایجاد تجربهٔ کاربری بهتری گردد، اما فراموش نکنیم که ممکنه در طول زمان نحوهٔ عملکرد این API دستخوش تغییر بشه و یا عرضه‌کنندگان مرورگرهای مختلفی مثل فایرفاکس، گوگل کروم، سافاری و … سازوکاری اختصاصی خود برای کنترل آن را تغییر دهند که به همین دلیل نیاز هستش تا تغییرات در مستندات این API رو زمانی که قصد استفاده از آن را داریم رصد کنیم.

برای این که با این API بیشتر آشنا بشید مینی پروژه ای رو آماده کردم که در ابتدای مقاله دکمه های مشاهده در آپارات و یوتیوب رو قرار دادم و همچنین برای دریافت سورس پروژه بر روی دکمه دریافت رایگان سورس پروژه کلیک نمایید.