如何使用jquery实现全屏问题

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_34023982

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量114

点赞数

文章标签： javascript java python ViewUI

原文链接：https://my.oschina.net/u/3378039/blog/1576555

版权

2019独角兽企业重金招聘Python工程师标准>>>

problem:因屏幕或文本域等太小，想扩大屏幕（全屏）

solve:

//先封装好方法

//进行切换
var fullScreenClickCount=0; 
//调用各个浏览器提供的全屏方法
var handleFullScreen = function () {
    var de = document.documentElement;

    if (de.requestFullscreen) {
        de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
    } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
    } else if (de.msRequestFullscreen) {
        de.msRequestFullscreen();
    }
    else {
        wtx.info("当前浏览器不支持全屏！");
    }

};
//调用各个浏览器提供的退出全屏方法
var exitFullscreen=function() {
    if(document.exitFullscreen) {
        document.exitFullscreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

//获取.fullscreen样式（选择器）的点击事件，再该事件中调用已封装好的方法

$(".fullscreen").click(function () {
    if (fullScreenClickCount % 2 == 0) {
        handleFullScreen();
    } else {
        exitFullscreen();
    }
    fullScreenClickCount++;
});

//这里仅用一个样式实现切换全屏退屏，关键点是判断浏览器实现全屏退屏的方法

完整的例子如下:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>fullscreen test</title>
</head>
<body>
    <button class="fullscreen" value="全屏按钮">全屏按钮</button>
</body>
<!-- 导入jquery插件 -->
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    //进行切换
    var fullScreenClickCount=0;
    //调用各个浏览器提供的全屏方法
    var handleFullScreen = function () {
        var de = document.documentElement;

        if (de.requestFullscreen) {
            de.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
            de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
            de.webkitRequestFullScreen();
        } else if (de.msRequestFullscreen) {
            de.msRequestFullscreen();
        }
        else {
            wtx.info("当前浏览器不支持全屏！");
        }

    };
    //调用各个浏览器提供的退出全屏方法
    var exitFullscreen=function() {
        if(document.exitFullscreen) {
            document.exitFullscreen();
        } else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
    $(".fullscreen").click(function () {
        if (fullScreenClickCount % 2 == 0) {
            handleFullScreen();
        } else {
            exitFullscreen();
        }
        fullScreenClickCount++;
    });
</script>
</html>

点击之前