一、定义：HTML5规范允许自定义网页上的任一元素全屏显示，存在兼容问题
二、使用：
①基本：
- Node.RequestFullScreen（）开启全屏显示
- Node.CancelFullScreen（）关闭全屏显示
②由于兼容性的原因（在IE9以下不支持，但是在高级浏览器新版本支持），不同浏览器需要添加不同的私有前缀（在js中也有私有前缀，在方法属性之前加上即可，并且首字母需大写）
- webkit内核浏览器，如Chrome浏览器：以
webkitRequestFullScreen方法实现，谷歌浏览器前缀webkitRequestFullScreen()里最后的Screen的S也可以为小写s，建议写成驼峰命名法
- gecko内核浏览器，如火狐浏览器：以
mozRequestFullScreen方法实现。
- Trident内核浏览器，如IE浏览器：使用IE时，最后的screen的s为小写，也即ms
RequestFullscreen，否则无效
<script> // 将浏览器前缀兼容封装成函数 function toFullVideo() { if (videoDom.requestFullscreen) { return videoDom.requestFullScreen(); } else if (videoDom.webkitRequestFullScreen) { return videoDom.webkitRequestFullScreen(); } else if (videoDom.mozRequestFullScreen) { return videoDom.mozRequestFullScreen(); } else { return videoDom.msRequestFullscreen(); } } </script>
③页面全屏（页面文档全屏）
document.documentElement.webkitRequestFullScreen()
④取消页面全屏（跟元素没有关系）
document.webkitCancelFullScreen;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5全屏操作</title> <style> .box { width: 400px; height: 400px; background: pink; } </style> </head> <body> <div class="box"></div> <button class="btn1">全屏显示</button> <button class="btn2">取消全屏</button> <script> document.querySelector(".btn1").onclick = function () { document.documentElement.webkitRequestFullScreen(); }; document.querySelector(".btn2").onclick = function () { document.webkitCancelFullScreen(); }; </script> </body> </html>
