JavaScript 对指定元素做全屏效果

最新推荐文章于 2024-05-30 22:28:39 发布

AvatarGiser

最新推荐文章于 2024-05-30 22:28:39 发布

阅读量304

点赞数

分类专栏： Javascript 小知识点

本文链接：https://blog.csdn.net/sinat_31213021/article/details/115550112

版权

Javascript 小知识点专栏收录该内容

16 篇文章 0 订阅

订阅专栏

测试 div 或 iframe 皆可用。可兼容Chrome、Firefox、Microsoft Edge，IE系列不是很友好！

html

<div id="win" class="win"></div>

css

.win {
    width: 200px;
    height: 180px;
    background: blue;
}

JavaScript

// 全屏
function setFullScreen() {
    var iframe = document.getElementById('win');
    if (iframe.requestFullscreen) {
        iframe.requestFullscreen();
    } else if (iframe.mozRequestFullScreen) {
        iframe.mozRequestFullScreen();
    } else if (iframe.msRequestFullscreen) {
        iframe.msRequestFullscreen();//ie浏览器
    } else if (iframe.webkitRequestFullscreen) {
        iframe.webkitRequestFullScreen();//谷歌浏览器
    } 
}
// 取消全屏
function cancelFullScreen() {
    var iframe = document.getElementById('win');
    if (document.exitFullscreen) { 
        document.exitFullscreen(); 
        } else if (document.msExitFullscreen){ 
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}