آموزش استفاده از متد Fullscreen در HTML5

امروز در دومین قسمت از سری آموزش های دوران طراحی وب به سمت متد های جدید HTML5 می رویم

در این قسمت قصد داریم از متدی جدید یا بهتر بگوییم API جدید در زبان HTML5 به نام متد Fullscreen استفاده کنیم و نحوه کار کردن با آن را شرح دهیم . هنگامی که زبان HTML5 رونمایی شد بسیاری از API های مفید و جدید نیز برای آن معرفی گردید که قبل تر این گونه امکانات به وسیله برنامه های جانبی از جمله فلش قابل اجرا بود . با استفاده از این متد می توانیم تمام صفحه سایت خودمان را فول اسکرین یا تمام صفحه کنیم , اما خوبی های این قابلیت جدید به اینجا ختم نمی شود زیرا به کمک این متد می توان کلیه اجزای صفحه از جمله ویدیو ها و تصاویر و… را در سایز بزرگتر یا تمام صفحه نمایش دهیم .

استفاده از این API بسیار ساده می باشد و نیازی به کدنویسی زیادی ندارد .

متد های این API :

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

[javascript]
document.requestFullScreen()
[/javascript]

این دستور تگی با آی دی canvas1 را به حالت تمام صفحه می برد:

[javascript]
document.getElementById(“canvas1”).requestFullScreen()
[/javascript]

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

[javascript]
document.cancelFullScreen()
[/javascript]

این دستور در صورتیکه کاربر در حالت تمام صفحه باشد، دستور زیر مقدار true را به عنوان خروجی باز می گرداند:

[javascript]
document.fullScreen
[/javascript]

اگر بخواهیم بفهمیم کدام المنت در حالت تمام صفحه قرار دارد، می توانیم از این دستور استفاده کنیم:
[javascript]
document.fullScreenElement
[/javascript]

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

اما بییایید کمی خلاقیت به خرج دهیم و کد هایمان را بهینه سازی کنیم :
تابع زیر هر المان یا عنصری از صفحه را که به عنوان آرگومان ورودی دریافت می کند آن را تمام صفحه یا فول اسکرین می کند
[javascript]
var fullScreen = function (element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}
[/javascript]

نحوه استفاده از این تابع به صورت زیر می باشد :
فول اسکرین کردن کل صفحه :
[javascript]
var $document = document.documentElement;
fullScreen($document);
[/javascript]

فول اسکرین کردن یک المان خاص :
[javascript]
var canvas = document.getElementById(‘canvas’);
fullScreen(canvas);
[/javascript]

و اما میرسیم به قسمت خارج شدن از Fullscreen (بازهم خلاقیت!) :
[javascript]
var cancelFullscreen = function () {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.webkitCancelFullScreen ) {
document.webkitCancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
[/javascript]
و اما استفاده از آن :
[javascript]
cancelFullscreen()
[/javascript]

خب به این ترتیب به پایان قسمت دوم از دوران طراحی وب رسیدیم . امیدوارم از این آموزش لذت کافی رو ببرید . اگر سوالی بود لطفا در بخش دیدگاه ها مطرح فرمایید
موفق پیروز و سربلند باشید