全屏显示和导航网站内部

Question

我想在“全屏”模式下显示我的网站。为此，我在我的网站上添加了这个脚本：https://github.com/sindresorhus/screenfull.js。它允许我以“全屏”模式显示页面。

我上传我的页脚，以便显示一个激活全屏模式的按钮。它工作得很好。

下面是我的页脚：

  <li><a href="#" class="fullscreen">Full screen</a><br /></li> 

这是我的Js：

if (screenfull.enabled) {
            // Display the button if the browser is compatible 
    $('.fullscreen').show();
}

$('.fullscreen').toggle(function() {
    screenfull.request();
}, function() {
    screenfull.exit();
});

否则，当我点击一个链接(将用户重定向到另一个页面)时，“全屏”模式被取消。有谁知道如何修复它吗？

是否有可能在“全屏”模式下开发网站，并允许用户在不退出此模式的情况下进行导航？我在搜集所有的资源。

谢谢

Answer 1

根据我对这个库的了解，您需要将将用户定向到的页面放在一个iframe中，然后显示该iframe。您所指向的库有一个样例页，其中包含如何在全屏中加载外部页的样例。代码如下：

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';

我直接从http://sindresorhus.com/screenfull.js/的示例中提取了这段代码。