كيف - ملء الشاشة
تعرف على كيفية إنشاء نافذة ملء الشاشة باستخدام JavaScript.
نافذة ملء الشاشة
كيفية استخدام JavaScript لعرض عنصر في وضع ملء الشاشة.
انقر فوق الزر لفتح الفيديو في وضع ملء الشاشة:
فيديو بملء الشاشة
لفتح عنصر في وضع ملء الشاشة ، نستخدم element.requestFullscreen()
الطريقة:
مثال
<script>
/* Get the element you want displayed in fullscreen mode (a
video in this example): */
var elem = document.getElementById("myvideo");
/* When the openFullscreen() function is executed, open the video in
fullscreen.
Note that we must include prefixes for different browsers, as
they don't support the requestFullscreen method yet */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else
if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
مستند ملء الشاشة
لفتح الصفحة بأكملها في وضع ملء الشاشة ، استخدم document.documentElement
بدلاً من . في هذا المثال ، نستخدم أيضًا وظيفة إغلاق لإغلاق ملء الشاشة:document.getElementById("element")
مثال
<script>
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;
/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen)
{ /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
/*
Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen)
{ /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
يمكنك أيضًا استخدام CSS لتصميم الصفحة عندما تكون في وضع ملء الشاشة:
مثال
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
الصفحات ذات الصلة
مرجع DOM HTML: طريقة requestFullscreen () .
مرجع DOM HTML: طريقة exitFullscreen () .
مرجع DOM HTML: خاصية documentElement .