div的全屏与退出全屏

Posted 2020-10-22 莫小龙

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();
                }
            }

 

参考自：http://blog.sina.com.cn/s/blog_1458577430102xn4r.html