<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>萌狼蓝天 伴姬一生</title> </head> <body> <div> <img src="./source/img/dog.jpg" height="300" alt=""> <button id="full">全屏显示</button> <button id="cancelFull">取消全屏</button> <button id="isFull">是否全屏</button> <p id="tip" style="color:blue"></p> </div> <script> //全屏显示 var div = document.querySelector('div'); document.querySelector('#full').onclick = function () { if (div.requestFullscreen) { div.requestFullscreen(); // 正常浏览器 } else if (div.webkitRequestFullScreen) { div.webkitRequestFullScreen(); // webkit } else if (div.mozRequestFullScreen) { div.mozRequestFullScreen(); //早期火狐浏览器 } else if (div.oRequestFullScreen) { div.oRequestFullScreen(); //早期Opera浏览器 } else if (div.msRequestFullscreen) { div.msRequestFullscreen(); //早期IE浏览器 } else { alert('暂不支持在您的浏览器中全屏'); } }; //取消全屏显示 document.querySelector('#cancelFull').onclick = function () { if (document.exitFullscreen) { document.exitFullscreen(); // 正常浏览器 } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); // webkit } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); //早期火狐浏览器 } else if (document.oCancelFullScreen) { document.oCancelFullScreen(); //早期Opera浏览器 } else if (document.msCancelFullscreen) { document.msCancelFullscreen(); //早期IE浏览器 } else { alert('暂不支持在您的浏览器中全屏'); } //可以用document，也可以用上方设置的变量 div }; //检测当前是否处于全屏状态 document.querySelector('#isFull').onclick = function () { // alert(document.webkitIsFullScreen); // webkit // 使用上面的弹窗方式。如果是处于全屏状态，会自动退出 document.getElementById('tip').innerHTML=document.webkitIsFullScreen; }; </script> </body> </html>
各类浏览器全屏的方法
一般浏览器
使用requestFullscreen()和exitFullscreen()来实现
早期版本Chrome浏览器
基于WebKit内核的浏览器需要添加webkit前缀，使用webkitRequestFullScreen()和webkitCancelFullScreen()来实现。
早期版本IE浏览器
基于Trident内核的浏览器需要添加ms前缀，使用msRequestFullscreen()和msExitFullscreen()来实现，注意方法里的screen的s为小写形式。
早期版本火狐浏览器
基于Gecko内核的浏览器需要添加moz前缀，使用mozRequestFullScreen()和mozCancelFullScreen()来实现。
早期版本Opera浏览器
Opera浏览器需要添加o前缀，使用oRequestFullScreen()和oCancelFullScreen()来实现。
