如何在页面加载时自动点击按钮实现iframe全屏？

需要添加的代码 #

你可以在页面加载完成后直接调用全屏函数，无需模拟点击按钮，代码如下：

// 监听DOM加载完成事件
document.addEventListener('DOMContentLoaded', function() {
    goFullscreen('cowboy');
});

代码放置位置 #

将这段代码放在你现有的<script>标签内部，goFullscreen函数定义之后即可。同时建议补充标准全屏API，让代码适配更多浏览器，完整代码如下：

<center><button id="full" style="color:blue;margin: 15px;;font-size:300%;" onclick="goFullscreen('cowboy'); return false">Fullscreen</button></center>

<script>
function goFullscreen(id) {
    var element = document.getElementById(id);
    if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.requestFullscreen) { // 补充标准API，适配更多浏览器
      element.requestFullscreen();
    }
}

// 添加自动执行的代码
document.addEventListener('DOMContentLoaded', function() {
    goFullscreen('cowboy');
});
</script>

重要注意事项 #

• 大多数现代浏览器不允许无用户交互的自动全屏，出于安全和体验考虑，这种自动触发的全屏请求会被浏览器拦截。如果代码无法自动触发全屏，这是正常的浏览器限制，此时只能引导用户手动点击按钮进入全屏。

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