0

我想以“全屏”模式显示我的网站。为此，我将这个脚本添加到我的网站：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();
});

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

是否可以在“全屏”模式下开发网站并允许用户在不退出此模式的情况下进行导航？我正在采取任何资源。

谢谢

4

1 回答 1

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/的示例中直接提取了这段代码。

于 2013-04-17T16:55:51.490 回答