همراه با HTML5 تعداد زیادی از خوبی‌های API ارائه شد و یکی از بهترین‌ها API تمام‌صفحه بود که راهی بومی برای مرورگر فراهم می‌کند تا کارهایی را که برای مدت طولانی فقط در فلش ممکن بود انجام دهد: نمایش صفحه وب در حالت تمام صفحه برای کاربر.

اگر در حال نمایش ویدیو یا تصاویر هستید یا در حال توسعه یک بازی هستید، این کار مفید است. در واقع هر محتوایی که نیاز به تمرکز دارد روی می توانید از API تمام صفحه بهره مند شوید.

و بهتر از همه، استفاده از API تمام صفحه واقعا آسان است…

روش ها

تعدادی از روش ها بخشی از API تمام صفحه هستند:

element.requestFullScreen()

این روش به یک عنصر اجازه می دهد تا تمام صفحه شود.

Document.getElementById(“myCanvas”).requestFullScreen()

این باعث می شود بوم با شناسه “myCanvas” تمام صفحه شود.

document.cancelFullScreen()

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

Document.fullScreen

اگر کاربر در حالت تمام صفحه باشد، این مقدار true خواهد شد.

document.fullScreenElement

عنصری را که در حال حاضر در حالت تمام صفحه است برمی‌گرداند.

توجه داشته باشید که اینها روش‌های استاندارد هستند، اما فعلاً برای انجام این کار در کروم، فایرفاکس و سافاری به پیشوندهای فروشنده نیاز دارید (اینترنت اکسپلورر و اپرا در حال حاضر از این API پشتیبانی نمی‌کنند).

در حال راه اندازی حالت تمام صفحه

از آنجایی که ابتدا باید بفهمیم که مرورگر کدام روش را می شناسد، تابعی ایجاد می کنیم که روش مناسب را برای مرورگر پیدا کرده و آن را فراخوانی می کند:

//helper function
function fullScreen(element) {
 if(element.requestFullScreen) {
 element.requestFullScreen();
 } else if(element.webkitRequestFullScreen ) {
 element.webkitRequestFullScreen();
 } else if(element.mozRequestFullScreen) {
 element.mozRequestFullScreen();
 }
}

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

پس از این تنها کاری که باید انجام دهیم این است که تابع fullScreen را به این صورت فراخوانی کنیم:

//for the whole page
var html = document.documentElement;
fullScreen(html);

 // For a specific element روی the page
var canvas = document.getElementById('mycanvas');
fullScreen(canvas);

با این کار درخواستی برای کاربر ارسال می‌شود که اجازه نمایش تمام‌صفحه را می‌دهد، اگر پذیرفته شود، تمام نوار ابزار مرورگر ناپدید می‌شوند و تنها چیزی که روی صفحه نمایش وب مورد نظر خواهد بود page یا عنصر واحد

در حال لغو حالت تمام صفحه

این روش همچنین به پیشوندهای فروشنده نیاز دارد، بنابراین از همان ایده فوق استفاده می کنیم و تابعی ایجاد می کنیم که با توجه به مرورگر کاربر تعیین می کند که از کدام پیشوند استفاده کنیم.

نکته ای که متوجه خواهید شد این است که این متد به هیچ عنصری نیاز ندارد زیرا برخلاف متد requestFullScreen همیشه برای کل سند اعمال می شود.

// the helper function
function fullScreenCancel() {
 if(document.requestFullScreen) {
 document.requestFullScreen();
 } else if(document .webkitRequestFullScreen ) {
 document.webkitRequestFullScreen();
 } else if(document .mozRequestFullScreen) {
 document.mozRequestFullScreen();
 }
}

//cancel full-screen
fullScreenCancel();

شبه کلاس CSS

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

/* Changing something in the body */
:-webkit-full-screen {
 font-size: 16px;
}
:-moz-full-screen {
 font-size: 16px;
}

/*Only one element*/
:-webkit-full-screen img {
 width: 100%;
 height: 100%;
}
:-moz-full-screen img {
 width: 100%;
 height: 100%;
}

توجه داشته باشید که نمی توانید پیشوندهای فروشنده را با کاما جدا کنید زیرا مرورگر آنها را نمی خواند:

/* This will not work */
:-webkit-full-screen img,:-moz-full-screen img {
 width: 100%;
 height: 100%;
}

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

نتیجه گیری

این API جاوا اسکریپت یکی از ناشناخته‌ترین API‌هایی است که با HTML5 عرضه شده است، اما به نظر من پیاده‌سازی آن هم موثر و هم ساده است. تجربه کاربر بهبود یافته از تمرکز روی یک عنصر واحد، به خصوص برای ویدیو، تصاویر و بازی ها ارزش چند خط کد را دارد.

آیا API تمام صفحه را در جایی پیاده سازی کرده اید؟ چه کاربردهایی می توانید برای آن در نظر بگیرید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر فوکوس از طریق Shutterstock.