js全屏、iframe全屏、F11实现iframe全屏、iframe监听resize事件

demo主要功能：

• js实现全屏功能
  注意：默认全屏会有黑色背景，需要css处理
• 主体中点击F11触发iframe全屏
• iframe中点击按钮触发主体全屏
• iframe内点击F11实现全屏功能
  注意：鼠标需要在iframe内才能触发
• iframe内点击按钮触发iframe全屏
• 监听iframe的resize事件

[测试环境chrome]
index.html

    
    
    
    
    
    



    
主体
    全屏
    

    

iframe.html

    
    
    
    
    
    




    
第一级iframe内容
    

        触发主体全屏:
        全屏
    
    

        触发iframe全屏:
        全屏
    

test.js

// 主体全屏
function initEvent(doc, btn) {
    btn.onclick = function () {
        var fullscreenElement = getFullscreenElement(doc);
        if (fullscreenElement) {
            exitFullscreen(fullscreenElement);
        } else {
            enterFullscreen(doc.body);
        }
    }
    // 监听fullscreenchange事件,是为了兼容F11和ESC按键操作
    doc.addEventListener("fullscreenchange", () => {
        var fullscreenElement = getFullscreenElement(doc);
        if (fullscreenElement == null) {
            btn.innerHTML = "全屏"
        } else {
            btn.innerHTML = "退出全屏";
            doc.body.style.background = "white"
        }
    })
}

// iframe全屏
function initIframeEvent(iframe, btn) {
    let doc = window.top.document;
    btn.onclick = function () {
        var fullscreenElement = getFullscreenElement(doc);
        if (fullscreenElement) {
            exitFullscreen(fullscreenElement);
        } else {
            enterFullscreen(iframe);
        }
    }
    // 监听fullscreenchange事件,是为了兼容F11和ESC按键操作
    doc.addEventListener("fullscreenchange", () => {
        var fullscreenElement = getFullscreenElement(doc);
        if (fullscreenElement == null) {
            btn.innerHTML = "全屏"
        } else {
            btn.innerHTML = "退出全屏";
            iframe["contentWindow"].document.body.style.background = "white";
        }
    })
}

/**
* 全屏
*/
function enterFullscreen(el) {
    console.log("进入全屏的元素", el)
    fullscreenState = true;
    if (el.requestFullscreen) {
        el.requestFullscreen();
    } else if (el.msRequestFullscreen) {
        el.msRequestFullscreen();
    } else if (el.mozRequestFullScreen) {
        el.mozRequestFullScreen();
    } else if (el.webkitRequestFullscreen) {
        el.webkitRequestFullscreen();
    } else {
        noFullscreenSupport();
    }
};

/**
* 退出全屏
*/
function exitFullscreen(fullscreenElement) {
    console.log("全屏元素", fullscreenElement)
    fullscreenState = false;
    // var doc = getIframe();
    let doc = window.top.document;
    if (doc.exitFullscreen) {
        doc.exitFullscreen();
    } else if (doc.msExitFullscreen) {
        doc.msExitFullscreen();
    } else if (doc.mozCancelFullScreen) {
        doc.mozCancelFullScreen();
    } else if (doc.webkitExitFullscreen) {
        doc.webkitExitFullscreen();
    } else {
        noFullscreenSupport();
    }
};

function noFullscreenSupport() {
    fullscreenState = !fullscreenState;
    alert('您的浏览器不支持全屏.');
};

function getFullscreenElement(doc) {
    let el = doc.fullscreenElement ||
        doc.mozFullScreenElement ||
        doc.webkitFullscreenElement
    return el;
}

function F11(doc,iframe){
    doc.onkeydown = function (e) {
        console.log("您点击了按键", e.key)
        var e = event || window.event;
        if (e && e.keyCode == 122) {
            e.preventDefault();
            enterFullscreen(iframe)
        }
    }
}

test.css

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
html{
    height:100%;
}

body {
    height: 100%;
    margin: 0 auto;
    padding:20px;
}

p {
    font-size: 26px;
}

button{
    border:1px solid #aaa;
    padding:5px 15px;
    border-radius: 6px;
    background: #fff;
    margin:10px;
    cursor: pointer;
}

iframe {
    height: 50vh;
    width:60vw;
    display: block;
    margin:0 auto;
    border:2px solid #00f;
}

/* 解决全屏黑色背景 */
.white:fullscreen {
    background-color: #fff;
}

.white:-webkit-full-screen {
    background-color: #fff;
}