H5实现全屏展示方法

最新推荐文章于 2025-06-18 16:40:05 发布

素燃

最新推荐文章于 2025-06-18 16:40:05 发布

阅读量1.4w

点赞数 2

分类专栏： js 文章标签： H5方法实现全屏

js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页全屏功能的方法。通过监听按钮点击事件触发全屏操作，并兼容多种浏览器的不同API调用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单些，直接上代码了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

	//准备一个按钮
	<button onclick="handleFullScreen()">全屏</button>

</body>
<script>
	//定义一个变量进行判断，默认false 非全屏状态
    let exitFullscreen = false
    // 全屏事件
    function handleFullScreen(){
        let element = document.documentElement;
        if (this.fullscreen) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        } else {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
        }
    }
</script>

</html>