html代碼
<!-- 全屏按鈕 --> <img id="alarm-fullscreen-toggler" src="/public/index/images/open.png" alt="全屏按鈕" />
js代碼
// 設置全屏 $('#alarm-fullscreen-toggler').on('click', function (e) { var element = document.documentElement; // 返回 html dom 中的root 節點 <html> if(!$('body').hasClass('full-screen')) { $('body').addClass('full-screen'); $('#alarm-fullscreen-toggler').addClass('active'); // 判斷瀏覽器設備類型 if(element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen){ // 兼容火狐 element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { // 兼容谷歌 element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { // 兼容IE element.msRequestFullscreen(); } // 切換全屏按鈕 $('#alarm-fullscreen-toggler').attr('src','/public/index/images/close.png'); } else { // 退出全屏 console.log(document); $('body').removeClass('full-screen'); $('#alarm-fullscreen-toggler').removeClass('active'); // 退出全屏 if(document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } // 切換全屏按鈕 $('#alarm-fullscreen-toggler').attr('src','/public/index/images/open.png'); } });