如何使整个网站在全屏下运行，屏幕满屏.js

How to make a whole website run under fullscreen with screenfull.js?

本文关键字：运行 屏幕 满屏 js 何使整 网站      更新时间：2023-09-26

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

提前非常感谢

尝试这样的事情：

<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 中触发全屏并能够导航离开。

相关文章：