我有一个jQuery代码
function errorHandler() {
alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);
// toggle full screen
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
// keydown event handler
document.addEventListener('keydown', function(e) {
if (e.keyCode == 13 || e.keyCode == 70) { // F or Enter key
toggleFullScreen();
}
}, false);
当我点击按钮时,全屏显示整个body
但我想在全屏显示div testfullscreen
我怎样才能做到这一点?
答案 0 :(得分:2)
现在可以在最新版本的Chrome,Firefox和IE(11)中使用。
按照Zuul在这个帖子上的指示,我编辑了他的代码以包含IE11以及全屏选择页面上任何元素的选项。
JS:
function toggleFullScreen(elem) {
// ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
if (elem.requestFullScreen) {
elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
HTML:
<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen(document.body)">
where&#34; document.body&#34;是你想要的任何元素。
另请注意,尝试从控制台运行这些全屏命令似乎无法在Chrome或IE上运行。我确实在Firefox中使用Firebug取得了成功。
另外需要注意的是,这些&#34;全屏&#34;命令没有垂直滚动条,您需要在CSS中指定:*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
overflow: auto !important;
}
&#34;!important&#34;似乎是IE渲染它所必需的