实现iframe内嵌维基百科内容的全屏功能优化需求及代码改进

没问题，我帮你调整了代码，解决了点击全屏时让维基百科iframe内容单独全屏的问题，同时清理了冗余代码、修复了原代码里的语法错误，现在的效果应该完全符合你的预期：

<!doctype html>
<html>
<head>
    <style>
        .embed-wrapper {
            position: relative;
            padding-bottom: 56.25%; /* 保持16:9的响应式比例 */
            padding-top: 30px;
            height: 0;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .embed-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        .fullscreen-btn-group {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="fullscreen-btn-group">
        <button onclick="toggleIframeFullscreen()">切换全屏</button>
    </div>

    <div class="embed-wrapper">
        <iframe id="wiki-iframe" allowfullscreen src="https://es.wikipedia.org/wiki/Wikipedia:Portada"></iframe>
    </div>

    <p style="text-align: justify;">
        <span style="font-size: 18px;">
            <img alt="Webinar Image" height="450" src="/courses/WEBINARFATRI/document/webinar-german-rodriguez-1.png" width="500">
        </span>
    </p>

    <script>
        const iframe = document.getElementById('wiki-iframe');

        function toggleIframeFullscreen() {
            // 判断当前是否处于全屏状态
            const isFullscreen = document.fullscreenElement || 
                                document.mozFullScreenElement || 
                                document.webkitFullscreenElement || 
                                document.msFullscreenElement;

            if (isFullscreen) {
                // 退出全屏
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                // 让目标iframe进入全屏
                if (iframe.requestFullscreen) {
                    iframe.requestFullscreen();
                } else if (iframe.mozRequestFullScreen) {
                    iframe.mozRequestFullScreen();
                } else if (iframe.webkitRequestFullscreen) {
                    iframe.webkitRequestFullscreen();
                } else if (iframe.msRequestFullscreen) {
                    iframe.msRequestFullscreen();
                }
            }
        }
    </script>
</body>
</html>

主要修改点说明： #

• 目标元素修正：原来的全屏函数是针对整个页面(document.documentElement)，现在改为指定的iframe元素，点击后只有维基百科内容全屏显示，不会影响页面其他部分。
• 代码清理优化：删除了重复的空body样式标签，把iframe的样式统一整合，让代码结构更整洁。
• 语法错误修复：修正了原iframe标签里的属性拼写错误（比如width属性格式混乱、多余的__idm_id__属性）。
• 交互简化：把原来的两个按钮改成一个切换按钮，点击一次进入全屏，再点击退出，更符合日常使用习惯。
• 浏览器兼容升级：加入了标准的全屏API写法，同时保留旧浏览器的兼容逻辑，覆盖更多使用场景。
• 加载顺序优化：把脚本放到页面底部，确保DOM元素加载完成后再执行，避免出现找不到iframe的报错。

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