要实现全屏,我们可以使用 requestFullscreen() 方法。该方法可用于 DOM 元素,使其进入全屏模式。
以下是一个示例:
1
2
3
4
5
6
7
8
9
10
constelement=document.getElementById('my-element');if(element.requestFullscreen){element.requestFullscreen();}elseif(element.mozRequestFullScreen){// Firefox
element.mozRequestFullScreen();}elseif(element.webkitRequestFullscreen){// Chrome, Safari and Opera
element.webkitRequestFullscreen();}elseif(element.msRequestFullscreen){// Internet Explorer and Edge
element.msRequestFullscreen();}
if(document.exitFullscreen){document.exitFullscreen();}elseif(document.mozCancelFullScreen){// Firefox
document.mozCancelFullScreen();}elseif(document.webkitExitFullscreen){// Chrome, Safari and Opera
document.webkitExitFullscreen();}elseif(document.msExitFullscreen){// Internet Explorer and Edge
document.msExitFullscreen();}
document.addEventListener('fullscreenchange',handleFullscreenChange);document.addEventListener('mozfullscreenchange',handleFullscreenChange);// Firefox
document.addEventListener('webkitfullscreenchange',handleFullscreenChange);// Chrome, Safari and Opera
document.addEventListener('MSFullscreenChange',handleFullscreenChange);// Internet Explorer and Edge
functionhandleFullscreenChange(){if(document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement){console.log('进入全屏模式');}else{console.log('退出全屏模式');}}
通过添加相应的事件监听器,可以在全屏模式变化时执行自定义的处理函数。
7 相关插件
了解以上 API 后本来已经准备开始写插件了,不过秉承不重复造轮子的思想,找到了以下两个库,基本满足开发需求了。