requestFullscreen实现全屏展示

最新推荐文章于 2025-06-06 09:05:36 发布

转载最新推荐文章于 2025-06-06 09:05:36 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yalong/p/8932802.html

文章标签：

#移动开发

本文介绍了如何使用requestFullscreen API在不同浏览器中实现元素的全屏展示，并提供了退出全屏的方法。兼容了包括Chrome、Firefox、IE在内的主流浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

requestFullscreen实现全屏展示.

var fullContainer = document.getElementById('fullScreenContainer');
                //先把元素展示出来
                fullContainer.style.display = "block";
//  在调用Element.requestFullScreen()前，可建立 fullscreenchange 的事件处理，将方便调试是否成功请求全屏模式。
                if (fullContainer.requestFullscreen) {  // Opera
                    fullContainer.requestFullscreen();
                }
                // IE
                else if (fullContainer.msRequestFullscreen) {
                    fullContainer.msRequestFullscreen();
                }
                // 火狐浏览器
                else if (fullContainer.mozRequestFullScreen) {
                    fullContainer.mozRequestFullScreen();
                }
                // 谷歌浏览器、android浏览器
                else if (fullContainer.webkitRequestFullScreen) {
                    fullContainer.webkitRequestFullScreen();
                }

document.exitFullScreen() 方法用于将文档请求退出全屏模式

document.exitFullScreen() 兼容处理

a. chrome（谷歌浏览器、android浏览器）

webkitExitFullScreen()

b. firefox（火狐浏览器）

mozCancleFullScreen()

Firefox 44 前的浏览器不允许在<frame>或<object>内的元素请求全屏；

在Firefox 44+,允许在顶层document（即body）内的元素或者<iframe>内的元素设置 allowfullScreen属性，则允许请求全屏显示；

c. IE

msExitFullScreen()

d. Opera

oExitFullScreen()