js点击弹开页面自动全屏

<!DOCTYPE html>
<html>
<head>
    <title>My sencond Three.js app</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>

        .wholeCl{
            display: none;
        }


    </style>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.bootcss.com/screenfull.js/5.0.0/screenfull.js"></script>
</head>
<body leftmargin= 0 topmargin =0 bottommargin = 0 style="width: 100%;height: 100%">
<button id="btn_full_scr">全屏测试按钮</button>
<script>// <![CDATA[
jQuery(function() {

    jQuery('#btn_full_scr').click(function() {
        if (!screenfull.enabled) {
           // alert('你的浏览器不支持全屏');
        }
//        screenfull.request();//当前页面全屏
        // does not require jQuery, can be used like this too:


        $('.wholeCl').css({"display": "block"});
        screenfull.request(document.getElementById('ifr1'));//某一个页面全屏
    });
});
function  exitFullscreen(){

}

window.onresize = function() {
    if (!checkFull()) {
        //要执行的动作
        $('.wholeCl').css({"display": "none"});
    }
}
function checkFull() {
    var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
    //to fix : false || undefined == undefined
    if (isFull === undefined) {isFull = false;}
    return isFull;
}

</script>
<div class="wholeCl">
    <iframe src ="https://blog.csdn.net/myfmyfmyfmyf" id="ifr1" name="ifr1" width="100%" height="100%"></iframe>
</div>
</body>

</html>
js点击弹开页面自动全屏

//360急速浏览器，有问题，把window.onresize就可以了

猜你喜欢
