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

fullscreen

امروز در دومین قسمت از سری آموزش های دوران طراحی وب به سمت متد های جدید 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]

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


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

  • تشکر از تمپ ها با آموزش های خوبش ، ادامه بده محمد جان ! روحانی متشکریم !

    امیرحسین شاه حسینی مرداد ۲, ۱۳۹۲ ۰۸:۲۲ پاسخ دادن
    • خواهش 😉

      محمد روحانی مرداد ۲, ۱۳۹۲ ۱۴:۱۶ پاسخ دادن
  • این کد هارو کجا میذاریم؟! چطوری میذاریم ؟! من که نفهمیدم :دی یکم راحت تر بگی خیلی آموزش جالب و مفیدی هست

    کمیل مرداد ۲, ۱۳۹۲ ۲۲:۳۴ پاسخ دادن
    • در کل اکثر api های جدید html5 از طریق زبان جاوااسکریپت در دسترس هستند و این api نیز اینگونه هست و باید در زبان جاوااسکریپ و میان تگ script استفاده شوند
      موفق باشید

      محمد روحانی مرداد ۴, ۱۳۹۲ ۰۰:۳۴ پاسخ دادن
  • سلام والا چی بگم !‌دست درد نکنه ولی ی جوری توضیح دادی زیاد جالب نیست!‌ اگه این مطلب ترجمه کردی از جایی ، ببخشید ی زره بیشتر وقت بزار خودت یاد بگیر و بعد به زبان خودت بنویس ۱۰۰%‌بهتر فک کنم !‌

    amir مرداد ۳, ۱۳۹۲ ۱۱:۰۲ پاسخ دادن
    • سلام . عزیزم بنده از جایی کپی نکردم و آموزش رو هم دقیقا خودم دادم شاید از لحاظ ویراستاری و انتقال مفهوم در زمینه ادبیات ضعیف باشه اما اگر کسی اینکاره باشه یا بهتره بگم برنامه نویس باشه به راحتی کد رو متوجه میشه و می تونه ازش استفاده کنه . در ضمن این آموزش فقط معرفی دستورات جدید HTML5 بود نه آموزش جاوااسکریپت !
      موفق باشید

      محمد روحانی مرداد ۴, ۱۳۹۲ ۰۰:۳۱ پاسخ دادن
  • مطلب خوبی بود
    فقط در قسمت پایانی مطلب فکر کنم در کدهای بخش خروج از فول اسکرین اشتباهی شده باشه لطفا بررسی کنید.

    سید مهدی شاه امیریان مرداد ۶, ۱۳۹۲ ۰۵:۳۶ پاسخ دادن
    • خواهش می کنم . بله اشکال تایپی بود رفع گردید . ممنون از دقت نظرتون

      محمد روحانی مرداد ۷, ۱۳۹۲ ۰۰:۰۱ پاسخ دادن
  • روحانی متشکریم !

    دانیال مرداد ۷, ۱۳۹۲ ۱۹:۲۶ پاسخ دادن
  • لطفا توضیح دقیقا فیت کردن صفحه اچ تی ام ال رو با رزولوشین های مختلف توضیح بدین

    میلاد مرداد ۲۴, ۱۳۹۲ ۱۱:۰۰ پاسخ دادن
  • بیشتر به درد تگ video میخوره اگه اشتباه نکنم!
    منم یه مدتی طراحی وب رو دارم یاد میگیرم مثل کاربرای دیگه زیاد متوجه منظورتون نمیشم.
    خب ریشه در آشنا نبودن کاربران با کد نویسی داره.

    فکر کنم قرار دادن فایل های تمرینی به کاربرا بیشتر کمک کنه.

    Farshad-T3 فروردین ۹, ۱۳۹۳ ۲۲:۲۷ پاسخ دادن
  • سلام و عرض ادب
    مطالب خوبی بود برای تازه کارها خوبه اما اینو باید بدونی که کپی مطالب دیگران کار اصلا درستی نیست و شما اگه مطلبیو کپی می کنی باید منبعش رو هم بگی و گرنه احتمالا دزد اطلاعات لقب میگیری و این شایسته شما نیست .
    در ضمن این کدها اصلا خوب نیستند و توی همه مرور گر ها جواب نمیدن برای تازه کارهایی مثل شما باید عرض کنم که استفاده از jquery بهترین گزینست .متشکرم

    ابراهیم توکلی مهر ۱۴, ۱۳۹۳ ۱۸:۳۱ پاسخ دادن
  • سلام
    واقعا ممنون
    دو روز دنبال این کد میگردم هر سایتی میرفتم آدم دیوانه میکرد
    ولی واقعا این آموزشتون خورد ممنون واقعا

    spark آبان ۲۳, ۱۳۹۳ ۱۰:۲۹ پاسخ دادن
  • آقا یه سوال؟؟؟؟؟
    زیاد به این مطلب ربط نداره فقط چون html5 اینجا مطرح میکنم….اگه بلدی ممنون میشم کمکم کنی….
    چه جوری میشه کاربر عناصر و در صفحه جابجا کنه با drag & drop نه با گزینه هایی ک خودمون تعریف میکنیم برای move.مثل سایت “www.msn.com”
    قسمت ادیت و میبینید؟؟؟

    nc آبان ۲, ۱۳۹۵ ۲۱:۴۰ پاسخ دادن

با نظرات و پیشنهادات خود تمپ ها را همراهی کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *