我正在尝试在我的网站上实现两个目标：
1.一个切换到全屏模式的按钮。
2.在页面之间通过时，将保留全屏模式。
我能够分别实现两个目标，但不能一起实现。
现在的情况是：
1.使用以下代码将按钮切换到全屏模式：
<script>
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
</script>
<li class="quicklinks"> <a href="#" class="layout-condensed-fullwidth" id="layout-condensed-width" >
<div onclick="toggleFullScreen();" class="iconset top-menu-fullpage-dark"></div>
</a> </li>
但是，切换页面时，全屏模式退出！
当通过单击F11切换到全屏模式时（不是如上所述），我可以使用以下代码使全屏保持不变：
<script>
function fullscreen(){
$('a').click(function() {
if(!$(this).hasClass('noeffect')) {
window.location = $(this).attr('href');
return false;
}
});
$(document).ready(function() {
fullscreen();
});
</script>
但是我找不到将两者结合的方法。仅在按F11键时，第2节中的代码才有效。关于其发生原因以及如何帮助解决此问题的任何想法？
谢谢！
根据MDN的 说法-在全屏模式下，使用全屏模式导航到另一个页面，更改选项卡或切换到另一个应用程序（例如，使用Alt-Tab）会退出全屏模式。
但是，我在全屏全屏API包装器中看到了一个技巧/黑客，可以解决此问题。它使用iframe可以在全屏模式下切换页面。也许您可以使用此包装器或在代码中寻找灵感。参见演示。
这是代码片段：
// 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';
})
也许不用更改即可，window.location您可以将更iframe.src改为链接href。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句