0

我正在使用 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？有解决方法吗？

非常感谢提前

4

1 回答 1

0

尝试这样的事情：

<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 中触发全屏，也无法导航离开。

于 2013-10-22T21:12:25.650 回答