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/的示例中删除了此代码。

在全屏显示和导航网站内部

1 个答案: