div的全屏与退出全屏

最新推荐文章于 2024-05-24 15:02:56 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-05-24 15:02:56 发布

阅读量296

点赞数

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Maxueyingying/article/details/129046256

版权

js 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

div的全屏与退出全屏

作用：将div全屏与退出全屏，一般播放器使用较多。

html按钮：

<button  onclick="showFull();">
                全屏
            </button>
<button  onclick="delFull();">
                退出全屏
            </button>

js调用：

function showFull(){
               var full=document.getElementById("container");
               launchIntoFullscreen(full);
            }

function delFull() {
                exitFullscreen();
            }

全屏方法封装：

 function launchIntoFullscreen(element) {
                if(element.requestFullscreen){
                    element.requestFullscreen();
                }
                else if(element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                }
                else if(element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                }
                else if(element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
            }

退出全屏方法封装：

 function exitFullscreen() {
                if(document.exitFullscreen) {
                    document.exitFullscreen();
                } else if(document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if(document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            }