浏览器都有页面全屏的功能 F11 ，那么如何用JavaScript控制页面全屏呢？MDN上提供的的API , 一个小demo验证一下！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>全屏</title> <style> html, body { height: 100%; } img { display: block; margin: 100px auto 0; width: 900px; cursor: pointer; } /* webkit和IE在元素进入全屏后，会保持元素原有的尺寸，所以需要通过css伪类进行设置 */ img:-webkit-full-screen{ width: 100%; height: 100%; } img:-ms-fullscreen { width: 100%; height: 100%; } </style> </head> <body> <img id="target" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530343927072&di=ba9a25dc1d88a14556abf44106a32a4f&imgtype=0&src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe9%2F3d%2Ffc%2Fe93dfc90c7406e68dd72afac6dda0357.jpg" alt=""> <script> window.onload = function () { let img = document.querySelector('#target'); // 监听事件 注意不同浏览器的兼容性问问题
// 错误事件为：fullscreenerror ， 同样注意前缀
document.addEventListener('fullscreenchange' , function() { console.log('全屏切换！') }) document.addEventListener('webkitfullscreenchange' , function() { console.log('全屏切换！') }) document.addEventListener('mozfullscreenchange' , function() { console.log('全屏切换！') }) document.addEventListener('MSFullscreenChange' , function() { console.log('全屏切换！') })
// 图片点击切换全屏 if (isFUllScreenEnabled()) { img.addEventListener('click', function () { if (hasFullScreenElement()) { exitFullScreen(); } else { setFullScreen(img); } }); } else{ console.log('此浏览器不支持全屏'); } } // 判断浏览器是否支持全屏 function isFUllScreenEnabled() { return document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled; } // 判断是否有已全屏的元素 function hasFullScreenElement() { return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement } // 将目标元素设置为全屏展示 function setFullScreen(target) { if (target.requestFullscreen) { target.requestFullscreen(); } if (target.webkitRequestFullscreen) { target.webkitRequestFullscreen(); } if (target.mozRequestFullScreen) { target.mozRequestFullScreen(); } if (target.msRequestFullscreen) { target.msRequestFullscreen(); } } // 文档退出全屏 function exitFullScreen() { if (document.exitFullscreen) { document.exitFullscreen(); } if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } if (document.msExitFullscreen) { document.msExitFullscreen(); } } </script> </body> </html>
Api的使用都很简单，主要就是一个兼容性的问题，这个小demo，在Chrome，Firefox，Edge，IE 11 上测试过，都可以正常切换全屏，也可以正常监听事件。
要注意Firefox中方法的拼写，F为大写（囧 ， 报错了看了半天，原来是拼写错误），Chrome和IE的记得要加CSS伪类去设置样式。