之前有一个项目可能需要全屏展示图标信息,所以在网上找到一段代码,如下:
var element = document.documentElement;
if (!$('body').hasClass("full-screen")) {
$('body').addClass("full-screen");
$('#alarm-fullscreen-toggler').addClass("active");
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
} else {
$('body').removeClass("full-screen");
$('#alarm-fullscreen-toggler').removeClass("active");
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
经过测试之后发现只有在谷歌浏览器下才可以正常运行,IE和火狐并没有效果,查看火狐控制台提示如下:
一经想到我这个页面是作为iframe嵌入到主页面当中的,所以在iframe中添加 allowFullscreen属性,并设置为true。 至此,网页并可正常全屏了。