مетод requestFullscreen() API تمام صفحه
- صفحه قبلی fullscreenEnabled()
- صفحه بعدی exitFullscreen()
- بازگشت به لایه بالاتر API Fullscreen JavaScript
تعریف و استفاده
requestFullscreen() این روش به صورت تمام صفحه عناصر را باز می‌کند.
توجه:لطفاً از مетод exitFullscreen()لغو حالت تمام صفحه
مثال
مثال 1
عناصر <video> در حالت تمام صفحه نمایش داده می‌شوند:
/* عناصری که باید به صورت تمام صفحه نمایش داده شوند (در این مثال ویدئو): */
var elem = document.getElementById("myvideo");
/* هنگام اجرای تابع openFullscreen()، ویدئو به صورت تمام صفحه باز می‌شود.
لطفاً توجه داشته باشید که باید پیشوندهای مختلف مرورگرها را شامل شویم، زیرا هنوز از ویژگی requestFullscreen پشتیبانی نمی‌کنند */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
مثال 2
برای باز کردن صفحه HTML به صورت تمام صفحه، از document.documentElement استفاده کنید نه document.getElementById("element"). در این مثال، ما همچنین از یک تابع بستن برای بستن تمام صفحه استفاده کرده‌ایم:
/* دریافت documentElement (<html>) برای نمایش کامل‌سازی صفحه */
var elem = document.documentElement;
/* مشاهده کامل‌سازی صفحه */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
/* بستن حالت کامل‌سازی صفحه */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
مثال 3
وقتی که صفحه در حالت کامل‌سازی صفحه است، شما همچنین می‌توانید از تنظیمات CSS برای تنظیم استایل صفحه استفاده کنید:
/* قوانین Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* قوانین IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* قوانین استاندارد */
:fullscreen {
background-color: yellow;
}
قوانین نوشتاری
HTMLElementObject.requestFullscreen()
پارامترها
بدون.
جزئیات فنی
| ارزش بازگشتی: | بدون ارزش بازگشتی. |
|---|
پشتیبانی مرورگرها
اعداد در جدول نشان‌دهنده نسخه اولین مرورگری هستند که این روش را کامل پشتیبانی می‌کند.
توضیحات:برخی از مرورگرها نیاز به پیشوند خاصی دارند (مطابق با توضیحات در گوشه):
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 71.0 15.0 (webkit) |
79.0 11.0 (ms) |
64.0 9.0 (moz) |
6.0 (webkit) | 58.0 15.0 (webkit) |
- صفحه قبلی fullscreenEnabled()
- صفحه بعدی exitFullscreen()
- بازگشت به لایه بالاتر API Fullscreen JavaScript
