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

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

متد های این API :

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

document.requestFullScreen()

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

document.getElementById(“canvas1”).requestFullScreen()

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

document.cancelFullScreen()

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

document.fullScreen

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

document.fullScreenElement

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

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

var fullScreen = function (element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}

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

var $document = document.documentElement;
fullScreen($document);

فول اسکرین کردن یک المان خاص :

var canvas = document.getElementById('canvas');
fullScreen(canvas);

و اما میرسیم به قسمت خارج شدن از Fullscreen :

var cancelFullscreen = function () {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.webkitCancelFullScreen ) {
document.webkitCancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}

و اما استفاده از آن :

cancelFullscreen()

تا کنون دیدگاهی برای این مطلب ارسال نشده است. اولین نفری باشید که دیدگاه خود را بیان می کند


دیدگاه خود را بیان کنید

به منظور بیان دیدگاه خود لطفا ابتدا وارد سایت شوید