Question

我正在使用screenfull.js库，我有一个按钮，我在其中附加事件以使点击进入全屏。我可以进入全屏模式但是一旦我点击某些内容，全屏就会退出。

我被告知全屏api应该在一个页面上使用。有一些方法可以通过使用此iframe技巧https://github.com/sindresorhus/screenfull.js/blob/gh-pages/index.html#L202-L219解决此问题。

// a little hack to be able to switch pages while in fullscreen.
// we basically just creates a seamless iframe and navigate in that instead.
$('#iframe').click(function () {
      // We create an iframe and fill the window with it
      var iframe = document.createElement('iframe')
      iframe.setAttribute('id', 'external-iframe');
      iframe.setAttribute('src', 'http://bbc.com');
      iframe.setAttribute('frameborder', 'no');
      iframe.style.position = 'absolute';
      iframe.style.top = '0';
      iframe.style.right = '0';
      iframe.style.bottom = '0';
      iframe.style.left = '0';
      iframe.style.width = '100%';
      iframe.style.height = '100%';
      $('#container').prepend(iframe);
      document.body.style.overflow = 'hidden';
})

但是，我不知道iframe的诀窍。对不起，我是JS的菜鸟。我在我的应用程序中有很多链接/请求，我想要全屏是我的整个应用程序。使用iframe技巧我需要让每个按钮使用iframe？有解决方法吗？

提前多多感谢

Answer 1

尝试这样的事情：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/screenfull.js/1.0.4/screenfull.min.js"></script>
<script>
    $(document).ready(function(){
        $('#go-full').click(function(){
            if (document.fullscreenEnabled) {
                requestFullscreen($('#my-full-site')[0]);
            }
        });
    });
</script>

<button id="go-full">Go Fullscreen</button>
<iframe id="my-full-site" src="http://example.com"></iframe>

您需要将其创建为新页面。您无法在iframe中触发全屏，也无法离开。

如何使用screenfull.js使整个网站在全屏下运行？

1 个答案: