Fullscreen API: روشی به منظور فول‌اسکرین کردن صفحات وب
نیاز به توضیح نیست که در اکثر مرورگرها با فشردن دکمهٔ F11 می‌توان صفحه را به صورت فول‌اسکرین نمایش داد اما در عین حال در نسخهٔ HTML5 یک ای‌پی‌آی نیز در اختیار دولوپرها قرار گرفته که با استفاده از آن می‌توانند امکانی را در اختیار کاربران سایت قرار دهند که با کلیک بر روی دکمه‌ای خاص، صفحهٔ مرورگر را به حالت فول‌اسکرین درآورند (برای آشنایی بیشتر با مفهوم ای‌پی‌آی می‌توانید به آموزش API چیست؟ مراجعه نمایید.) به طور کلی، از جمله کاربردهای این ای‌پی‌آی می‌توان به گیم‌‌های آنلاین، اسلایدشو، نمایش ویدیو و ... اشاره کرد مضاف بر اینکه با استفاده از این ای‌پی‌آی هم می‌توان کل صفحه را فول‌اسکرین کرد و هم اِلِمان خاصی را هدف قرار داد.
بسته به نوع مرورگری که از آن استفاده می‌کنیم، متدهای ارتباط با مرورگر نیز در این ای‌پی‌آی متفاوتند. به طور مثال، در فایرفاکس باید متد mozRequestFullScreen فراخوانی گردد اما این در حالی است که در مرورگرهای گوگل کروم و سافاری که مبتنی بر موتور رِندِرینگ WebKit هستند باید متد webkitRequestFullScreen را فرخوانی کرد.
بلوک زیر را می‌توان به عنوان یک نمونهٔ کامل و اجرایی از این ای‌پی‌آی مد نظر قرار داد. کدهای زیر را می‌توانید در فایلی با پسوند html. و با نامی دلخواه همچون index.html ذخیره نموده و آن را در مرورگر اجرا نمایید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Fullscreen API</title>
</head>
<body>
<button id="fs-btn">Go Fullscreen</button>
<button id="exit-fs-btn">Exit Fullscreen</button>
</body>
</html>
<script>
function requestFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else {
console.log('Fullscreen API is not supported.');
}
};
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else {
console.log('Fullscreen API is not supported.');
}
};
var fsDocButton = document.getElementById('fs-btn');
var fsExitDocButton = document.getElementById('exit-fs-btn');
fsDocButton.addEventListener('click', function(e) {
e.preventDefault();
requestFullscreen(document.documentElement);
});
fsExitDocButton.addEventListener('click', function(e) {
e.preventDefault();
exitFullscreen();
});
</script>همان‌طور که ملاحظه می‌شود، دو دکمه تحت عناوین Go Fullscreen و Exit Fullscreen روی صفحه قرار گرفته که با کلیک روی دکمهٔ اول صفحهٔ مرورگر به صورت تمام‌صفحه (فول‌اسکرین) درخواهد و آمد و دکمهٔ دوم نیز ما را از این حالت خارج می‌سازد.
جمع‌بندی
گرچه HTML5 Fullscreen API ابزاری کاربردی است تا از آن طریق امکانی در اختیار کاربران سایت خود قرار دهیم که در نهایت منجر به ایجاد تجربهٔ کاربری بهتری گردد، اما فراموش نکنیم که ممکن است در طول زمان نحوهٔ عملکرد این ای‌پی‌آی دستخوش تغییر گردد و یا عرضه‌کنندگان مرورگرهای مختلفی همچون فایرفاکس، گوگل کروم، سافاری و ... سازوکاری اختصاصی خود برای کنترل آن را تغییر دهند که به همین دلیل نیاز است تا تغییرات در مستندات این ای‌پی‌آی را زمانی که قصد استفاده از آن را داریم رصد کنیم.
