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 روی صفحه قرار گرفته که با کلیک روی دکمهٔ اول صفحهٔ مرورگر به صورت تمام‌صفحه (فول‌اسکرین) درخواهد و آمد و دکمهٔ دوم نیز ما را از این حالت خارج می‌سازد.

حال به منظور درک بهتر کدهای جاوااسکریپتی، به تفسیر خط به خط کدهای فوق می‌پردازیم. داخل تگ‌های <script></script> ابتدا فانکشنی تحت عنوان ()requestFullscreen تعریف کرده‌ایم که یک پارامتر ورودی به نام element می‌گیرد که این پارامتر در ادامه با اِلِمانی از صفحه که قصد داریم فول‌اسکرین شود جایگزین خواهد شد. سپس در اولین دستور شرطی چک کرده‌ایم ببینیم که آیا به پارامتر element متد استاندارد requestFullscreen منتسب شده است یا خیر که اگر نتیجه true بود، این متد فراخوانی می‌شود (به طور کلی، متد requestFullscreen به عنوان متد اصلی و استاندارد ارتباط با این ای‌پی‌آید قلمداد می‌گردد.)

لازم به یادآوری است که رفتار مرورگرهای مختلف با این ای‌پی‌آی متفاوت است و از همین روی نیاز است متدهای اختصاصی مرورگرهای کروم/سافاری، فایرفاکس و اینترنت اکسپلورر را چک کنیم. در همین راستا، در دستور شرطی دوم داخل این فانکشن webkitRequestFullscreen که مخصوص مرورگرهای کروم/سافاری است را چک کرده‌ایم، در دستور شرطی سوم متد mozRequestFullScreen را چک کرده‌ایم که مخصوص مرورگر فایرفاکس است، دستور شرطی چهارم متد msRequestFullscreen را برای اینترنت اکسپلورر چک می‌کند و در نهایت به یک دستور else می‌رسیم که اگر هیچ‌کدام از شرط‌های فوق برآورده نشد وارد آن شده و پیامی را در کنسول مرورگر چاپ می‌کنیم (همچنین در نظر داشته باشیم که در مرورگر مایکروسافت اِج از متد استاندارد fullscreenElement استفاده می‌شود.)

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

حال با استفاده از خطوط زیر، بر اساس آی‌دی دکمه‌ها آن‌ها را شناسایی کرده‌ایم تا هر زمانی که کاربر روی یکی از آن‌ها کلیک کرد، فانکشن مربوطه کال شود:

var fsDocButton = document.getElementById('fs-btn');
var fsExitDocButton = document.getElementById('exit-fs-btn');

در خط اول متغیری تحت عنوان fsDocButton ساخته‌ایم که نامی کاملاً دلخواه است اما با توجه با کاری که قرار است انجام شود، سعی شده تا نامی بامسمی برایش انتخاب گردد. با استفاده از دستور ()document.getElementById که جزو قابلیت‌های خود زبان جاوااسکریپت است دستور داده‌ایم تا اِلِمانی روی صفحه با شناسهٔ fs-btn را یافته و آن را به متغیر fsDocButton منتسب نماید. به همین ترتیب، در خط بعد متغیر دیگری تحت عنوان fsExitDocButton ایجاد نموده‌ایم که این وظیفه را دارا است تا به دکمه‌ای که مسئول خارج کردن کاربر از حالت فول‌اسکرین است مرتبط گردد (فانکشن ()getElementById که اصطلاحاً یک فانکشن Built-in در زبان جاوااسکریپت است این وظیفه را دارا است تا بسته به آرگومان ورودی که برایش در نظر می‌گیریم، اِلِمانی با یک ID خاص را بیابد.) حال قصد داریم به بررسی بخشی از کد بپردازیم که به محض کلیک کردن کاربر روی دکمهٔ Go Fullscreen فعال خواهد شد:

fsDocButton.addEventListener('click', function(e) {
    e.preventDefault();
    requestFullscreen(document.documentElement);
});

همان‌طور که ملاحظه می‌شود، فانکشن از پیش تعریف شدهٔ دیگری تحت عنوان ()addEventListener را به متغیر fsDocButton منتسب کرده‌ایم که دو پارامتر ورودی می‌گیرد. پارامتر اول اَکشنی است که بر آن است می‌خواهیم تَسک خاصی را عملی سازیم که در مثال فوق از click استفاده نموده‌ایم که این وظیفه را دارا است تا هر موقع کاربر روی اِلِمان مذکور کلیک کرد، دستورات مد نظر دولوپر را اجرا نماید (مثلاً اگر بخواهیم کدی بنویسیم که پس از دو بار کلیک کردن کاربر اکشن مذکور انجام شود، باید از کیورد dblclick استفاده نماییم.)

پارامتر دوم متد ()addEventListener یک فانکشن بی‌نام است که یک پارامتر ورودی با نامی دلخواه همچون e برایش در نظر گرفته‌ایم (این نام برگرفته از کلمهٔ Event به معنی «رویداد» است.) در واقع، e در اینجا آبجکتی است که به طور خودکار به محض کلیک روی همان اِلِمانی که رویش کلیک کرده‌ایم (در این مثال دکمهٔ Go Fullscreen) ساخته می‌شود و از این پس می‌توانیم از میان متدهای بیشماری که جاوااسکریپت برای هندل کردن رویدادها دارا است یکی را انتخاب کرده و به آن منتسب کنیم به طوری که در این مثال از متد ()preventDefault استفاده کرده‌ایم (همان‌طور که از نام این متد مشخص است، از اجرای عملکرد پیش‌فرض اِلِمانی که روی آن کلیک کرده‌ایم جلوگیری به عمل می‌آورد؛ به عبارتی، اجازه نمی‌دهد که دکمه کار خاصی انجام دهد.)

اگر بخواهیم عملکرد کدهای فوق را بیشتر توضیح دهیم، باید گفت به محض اینکه کاربر روی دکمه‌ای با آی‌دی fs-btn کلیک کند یک اصطلاحاً Anonymous Function به معنی «تابع بی‌نام» تحت عنوان (function(e فراخوانی می‌شود که خروجی آن آبجکتی است که در لحظه یک اصطلاحاً Handler، که به صورت تحت‌الفظی می‌توان آن را «ابزاری کمکی» ترجمه کرد، به نام e می‌سازد و آبجکت ساخته‌شده را به آن اختصاص می‌دهد.

در زبان جاوااسکریپت یکسری متد پیش‌فرض وجود دارند که برای هندل (مدیریت) کردن رویدادها می‌باشند که از آن جمله می‌توان به ()preventDefault اشاره کرد که وقتی روی آبجکت e فراخوانی شود، مرورگر را از انجام عملیات پیش‌فرض روی اِلِمان مذکور که در این مثال دکمه است باز می‌دارد (لازم به یادآوری است که هَندلر فوق را با هر نامی می‌توان ساخت. به طور مثال، می‌توان به نامی همچون (function(behzadCustomHandlerWoo اشاره کرد!)

در ادامه، فانکشنی که پیش از این تحت عنوان ()requestFullscreen ساختیم را کال کرده و document.documentElement را به عنوان آرگومان ورودی به این فانکشن پاس می‌دهیم (اساساً منظور از document.documentElement کل صفحهٔ مروگر است.) حال به نظر می‌رسد تا با توضیحات فوق، درک سازوکار بلوک زیر نیز مشخص باشد:

fsExitDocButton.addEventListener('click', function(e) {
    e.preventDefault();
    exitFullscreen();
});

چنانچه خیلی کوتاه بخواهیم توضیح دهیم، این بلوک از کد به محض کلیک روی دکمهٔ Exit Fullscreen اجرا شده و صفحهٔ مرورگر را از حالت فول‌اسکرین خارج می‌سازد.

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