HTML5–瀏覽器全螢幕操作、退出全螢幕、是否全螢幕
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <img src="../images/l1.jpg" alt=""> <input type="button" id="full" value="全螢幕"> <input type="button" id="cancelFull" value="退出全螢幕"> <input type="button" id="isFull" value="是否全螢幕"> </div> <script> /*全螢幕操作的主要方法和屬性 * 1.requestFullScreen():開啟全螢幕顯示 * 不同瀏覽器需要添加不同的前綴 * chrome:webkit firefox:moz ie:ms opera:o * 2.cancelFullScreen():退出全螢幕顯示:也添加前綴，在不同的瀏覽器下.退出全螢幕只能使用document來實現 * 3.fullScreenElement:是否是全螢幕狀態，也只能使用document進行判斷*/ window.onload=function(){ var div=document.querySelector("div"); /*添加三個按鈕的點擊事件*/ /*全螢幕操作*/ document.querySelector("#full").onclick=function(){ /*div.requestFullScreen();*/ /*div.webkitRequestFullScreen();*/ /*div.mozRequestFullScreen();*/ /*使用能力測試添加不同瀏覽器下的前綴*/ if(div.requestFullScreen){ div.requestFullScreen(); } else if(div.webkitRequestFullScreen){ div.webkitRequestFullScreen(); } else if(div.mozRequestFullScreen){ div.mozRequestFullScreen(); } else if(div.msRequestFullScreen){ div.msRequestFullScreen(); } } /*退出全螢幕*/ document.querySelector("#cancelFull").onclick=function(){ if(document.cancelFullScreen){ document.cancelFullScreen(); } else if(document.webkitCancelFullScreen){ document.webkitCancelFullScreen(); } else if(document.mozCancelFullScreen){ document.mozCancelFullScreen(); } else if(document.msCancelFullScreen){ document.msCancelFullScreen(); } } /*判斷是否是全螢幕狀態*/ document.querySelector("#isFull").onclick=function(){ /*兩個細節：使用document判斷 能力測試*/ if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){ alert(true); } else{ alert(false); } } } </script> </body> </html>
