从iframe外部的按钮触发全屏？

Question

我正在使用 Cloud Games 添加 iframe，他们在 iframe 画布中有一个全屏选项可将其切换为全屏。 当我们按下“全屏”按钮时，有没有办法让它全屏显示

HTML

<div>
  <button id="trigger">Full Screen</button>
</div>
<section>
  <iframe src="https://cloudgames.com/games/html5/soldiers-combat-new-en-s-iga-cloud/index.html?pub=10" name="cloudgames-com" width="913" height="516" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
</section>

JS

$('#trigger').click(function(e) {
  e.preventDefault();
  console.log('Button Pressed');
});

链接到Codepen

Answer 1

我找到了这个：https://codepen.io/ssk7833/pen/mVOXXp

我认为这部分与你相关：

var iframe = document.querySelector('#container iframe');
    // Do fullscreen
    if (iframe.requestFullscreen) {
      iframe.requestFullscreen();
    } else if (iframe.webkitRequestFullscreen) {
      iframe.webkitRequestFullscreen();
    } else if (iframe.mozRequestFullScreen) {
      iframe.mozRequestFullScreen();
    } else if (iframe.msRequestFullscreen) {
      iframe.msRequestFullscreen();
    }