如何点击按钮让iFrame全屏？优先无需JavaScript方案

优先无JS的视觉模拟全屏方案 #

如果不想使用JavaScript，可以通过CSS的:target伪类实现点击切换容器尺寸，视觉上模拟全屏效果，步骤如下：

• 将iframe和标题栏放入统一容器，通过锚点点击切换容器样式
• 无需编写任何脚本，纯HTML+CSS实现

修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .game-container {
            position: relative;
            width: 740px;
            height: 465px;
            margin: 0 auto;
        }
        .game-header {
            padding: 8px;
            background: #fff;
            border-bottom: 1px solid #eee;
        }
        /* 触发全屏后的容器样式 */
        .game-container:target {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
        }
        .game-container:target iframe {
            width: 100%;
            height: calc(100vh - 40px); /* 预留标题栏高度 */
        }
        .fullscreen-btn, .exit-btn {
            text-decoration: none;
            padding: 4px 8px;
            background: #ddd;
            border-radius: 4px;
            float: right;
        }
        .exit-btn {
            display: none;
        }
        .game-container:target .exit-btn {
            display: inline-block;
        }
        .game-container:target .fullscreen-btn {
            display: none;
        }
    </style>
</head>
<body>
    <div class="game-container" id="fullscreen-container">
        <div class="game-header">
            <img src="https://website.com/wp-content/uploads/2023/05/image.webp" style="width: 35px; vertical-align: middle;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1v1.lol
            <a href="#fullscreen-container" class="fullscreen-btn">全屏</a>
            <a href="#" class="exit-btn">退出全屏</a>
        </div>
        <iframe src="https://1v1.lol" style="border:0;" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" height="465px" width="740px" allowfullscreen="yes"></iframe>
    </div>
</body>
</html>

简便JS原生全屏方案（与目标网站效果一致） #

如果需要浏览器原生的全屏效果，可使用HTML5 Fullscreen API，仅需几行简单脚本就能实现带顶部栏的全屏功能：

• 让包含标题栏和iframe的容器进入全屏，而非单独iframe全屏
• 兼容主流浏览器的前缀写法

修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .game-container {
            position: relative;
            width: 740px;
            height: 465px;
            margin: 0 auto;
        }
        .game-header {
            padding: 8px;
            background: #fff;
            border-bottom: 1px solid #eee;
        }
        .fullscreen-btn {
            text-decoration: none;
            padding: 4px 8px;
            background: #ddd;
            border-radius: 4px;
            float: right;
            cursor: pointer;
        }
        /* 全屏状态下的容器样式 */
        .game-container:fullscreen {
            width: 100vw;
            height: 100vh;
        }
        .game-container:fullscreen iframe {
            width: 100%;
            height: calc(100vh - 40px);
        }
        /* 兼容webkit内核浏览器 */
        .game-container:-webkit-full-screen {
            width: 100vw;
            height: 100vh;
        }
        .game-container:-webkit-full-screen iframe {
            width: 100%;
            height: calc(100vh - 40px);
        }
    </style>
</head>
<body>
    <div class="game-container" id="gameContainer">
        <div class="game-header">
            <img src="https://website.com/wp-content/uploads/2023/05/image.webp" style="width: 35px; vertical-align: middle;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1v1.lol
            <span class="fullscreen-btn" onclick="toggleFullscreen()">全屏/退出</span>
        </div>
        <iframe src="https://1v1.lol" style="border:0;" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" height="465px" width="740px" allowfullscreen="yes"></iframe>
    </div>

    <script>
        function toggleFullscreen() {
            const container = document.getElementById('gameContainer');
            if (!document.fullscreenElement) {
                // 进入全屏，兼容不同浏览器
                container.requestFullscreen?.() || container.webkitRequestFullscreen?.();
            } else {
                // 退出全屏
                document.exitFullscreen?.() || document.webkitExitFullscreen?.();
            }
        }
    </script>
</body>
</html>

关键注意点 #

• 保留iframe的allowfullscreen="yes"属性，避免全屏权限被浏览器拦截
• 浏览器全屏API必须由用户主动触发（如点击按钮），这是浏览器的安全限制
• 两种方案都保留了你的标题栏样式，全屏时标题栏会固定在容器顶部

内容的提问来源于stack exchange，提问作者TechMonkey