js点击弹开页面自动全屏

最新推荐文章于 2023-01-09 11:32:55 发布

牟云飞

最新推荐文章于 2023-01-09 11:32:55 发布

阅读量1.8k

点赞数

分类专栏： js

本文为博主牟云飞原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/myfmyfmyfmyf/article/details/105091464

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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>

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

牟云飞

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
js点击弹开页面自动全屏

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

扫一扫