用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

最新推荐文章于 2022-03-13 11:31:34 发布

转载最新推荐文章于 2022-03-13 11:31:34 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fyyDreamToSail/p/8327597.html

本文介绍如何使用HTML5的全屏API实现网页或元素的全屏显示，并提供了兼容不同浏览器的方法。同时，还展示了如何监听全屏状态的变化。

项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持

　　全屏：

var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
}

　　退出全屏：

if (document.exitFullscreen) {
    document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
    document.msExitFullscreen();
}

　　事件监听：

document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);
 
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);
 
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);
 
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);

　转载自：https://www.cnblogs.com/qshting/p/6116407.html　

转载于:https://www.cnblogs.com/fyyDreamToSail/p/8327597.html