火狐浏览器的全屏兼容问题 allowfullscreen="true"

最新推荐文章于 2023-07-19 17:52:22 发布

求生之路

最新推荐文章于 2023-07-19 17:52:22 发布

阅读量8.7k

点赞数 1

分类专栏：程序人生

本文链接：https://blog.youkuaiyun.com/wwlinhappy/article/details/88685007

版权

程序人生专栏收录该内容

11 篇文章

订阅专栏

博客介绍了开发后台系统时，常使用 iframe 嵌套内容区域，通过添加 allowfullscreen=\true\ 属性可实现全屏功能，还提及了全屏和退出全屏相关内容。

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

一般开发后台系统都用到 iframe 来嵌套内容区域，

加上allowfullscreen="true" 就可以全屏了。

全屏：

var docElm = document.getElementById("container");
 if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
 }
else if (docElm.msRequestFullscreen) {
    docElm.msRequestFullscreen();
}
else if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
}
else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
}else{
    alert("当前浏览器不支持全屏化操作！");
}

退出全屏：

$("#container").removeClass("container");
vm.showFullscreenBtn = true;
if (document.exitFullscreen) {
    document.exitFullscreen();
}
else if (document.msExitFullscreen) {
    document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
} else{
    alert("当前浏览器不支持全屏化操作！");
}